I just create grid based on mobile first (old style, not using flex). When I try my result, the width of element when on mobile is not work, it overwrite width from min-width: 768px. Here is the image
I've tested it on other element, and it's not have problem. Check out this image
why it's have different result, I'm using same css. Please help me :)
I guess you have missed meta tag in head tag which specifically tells browser to take media queries css :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Related
I'm working on a web application that's meant to be used exclusively on phones (of various sizes). The application includes various buttons that I resize based on the user's screen size so that we maximize the use of horizontal and vertical space.
I have specified a few media queries for responding to both the horizontal and vertical layout changes using tailwind (see below):
screens: {
'sm': '340px',
'md': '360px',
'lg': '385px',
'xl': '640px',
'2xl': '1024px',
"tall": { 'raw': '(min-height: 740px)' },
"vtall": { 'raw': '(min-height: 800px)' }
}
These all work when looking at the display on my desktop with dev tools. The view is changing based on vertical and horizontal size changes.
The issue is when I use an actual mobile device, I notice that my application is consistently ignoring the vertical media queries.
I've isolated the issue to this line:
<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height"></meta>
When I make my line...
<meta name="viewport" content="height=device-height"></meta>
The vertical media query works, but not the horizontal.
But the moment I add the width specification back in... the vertical media query doesn't work, but the horizontal one does.
Any ideas?
I'm not sure if it would make any difference, but you don't need to close the meta tag, what you want is
<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height">
Can you start a codepen or jsfiddle that illustrates your problem?
I want to force browser, to set virtual viewport to a fixed value.
Typically the meta viewport in responsive page looks like:
<meta name="viewport" content="width=device-width, initial-scale=1">
i found a solution to set width to fixed value:
<meta name="viewport" content="width=1200px">
But unfortunately it works well only in chrome. What i want to get is with width lower than 1200 i want to turn on the zooming functionality.
Does anybody knows any other trick to do it?
EDIT
Actually the problem is, that i managed almost all layouts with bootstrap to achieve responsiveness. But client decided, that he don't want this page to be responsive, but make the width fixed regardless of device width and toggle horizontal and vertical scrollbars if needed.
What i am looking for is a realy easy warkaround, to do this without hudge style modifications.
Give this a try in jQuery:
if(screen.width < 1200){
$("meta[name=viewport]").attr("content", "width=device-width, initial-scale=1, user-scalable=yes");
}
I created this page based on bootstrap and when I test it with http://www.mobilephoneemulator.com/ the page goes into full-width mode, adjusting to the screen-size of the browser on the phone. However, when I do this on my real IPhone 6 (and also IPad), it does not seem to do this (both in Safari and Chrome) and I'm not sure why. Perhaps this behavior occurs because it automatically tabs into the Username field, thus zooming out? I attached a screenshot:
Try adding the viewport meta to the header of your page. It's quite important for mobile sites to control the zooming:
<meta name="viewport" content="width=device-width, initial-scale=1">
More information is at Mozilla's MDN: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Its because the width is set to 50% because of the class col-sm-6.
Please add col-xs-12 to the div to the make its width 100%
Please refer to Bootstrap's Documentation
Make the class on the parent div 'container-fluid'.
<div class="container-fluid">
Adjust the bootstrap classes to:
<div class="col-sm-12">
Hope this helps.
#John I think the problem Is with the zooming Here, add this <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> in the <head> tag, That should do the trick!
I'm working on a website and I'm trying to make it mobile friendly by including <meta name="viewport" content="width=device-width"> in my html.
Unfortunately I have an element that needs to be larger then the device width. I was going to use media queries to hard code values for this element on different screen sizes but it seems like I am not able to override the elements width.
This is the element whose width I want to override:
<div id="menu_bar">
Currently the only way I can override this elements width is by doing:
<div id="menu_bar" style=" width: 1024px;">
However if I do:
<style>
#menu_bar {width : 1024px;}
</style>
<div id="menu_bar">
it does not work. Even adding !important does not work. I need to be able to do it the second way because I need to use media queries.
Just for reference I have the menu bar as a ruby on rails partial because on every page of my website.
Any idea how to override the width of the menu bar so I can use media queries?
Any help is greatly appreciated.
Try going to http://atmedia.info/ -- it will scan your device (refresh to rescan it in portrait and in landscape) - it tells you a bit about media queries that match your device. Assuming you have not already solved your stuff yet.
This meta tag combo seems to help me.. and I use media queries to match devices in min-width and min-height (max as well)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="mobileoptimized" value="0" />
I have my site :
www.emantiss.com
And when Im resizing the site the main image on the top not resizing with the site it self.
Just when im doing a refresh to the page the new size get in action.
Im trying alot of things with max-width and this code:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
but it doesnt work for me.
If some1 can help me. it Will be great.
If you want images to be sized according to the size of the browser window you have to use relative value, i.e. percentual values. You can use media queries in your css file to limit this behavior to windows not until a certain size.
This is one quick way of doing it provided you are using the <IMG> tag:
CSS
.container{max-width-500px;}
.container img{width:100%;}
HTML
<div class="container">
<img src="YOUR-IMG-URL" />
</div>