I am using this "pure HTML + CSS" solution to a flex-layout, that is working fine when I change window size at my desktop browser, but when view the same page in a mobile device, specifically Android's Chrome, the browser do a "zoom out" instead to use CSS #media screen and (max-width: 360px) directive.
How to say to Chrome to use the directive and not doo zoom-out? I need to use a kind of viewport? And the viewport not destroys the desktop layout?
Make sure that you have <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your document <head>.
Please see the tutorials or spec for more information for why this is necessary:
"Viewport basics" at developer.mozilla.org
CSS Responsive Web Design (RWD) / Viewport at W3Schools
https://www.quirksmode.org/mobile/viewports2.html
W3C official draft specification. In nowadays the "live reference" is yet the Apple's specification.
PS: question/answer about javascript access to Viewport
Related
GOAL:
Stylize a chat-interface on mobile devices.
PROBLEM:
I've thrown together a proof-of-concept for a chatbot. Everything is very simple, including the JS & CSS. While I'm also having a separate issue with JS (i think), this here is my CSS problem.
While developing, I tested in FF & Chrome, and scaled down the browsers to emulate the mobile-browser experience.
All the CSS media queries acted as expected.
Yet ...on any mobile device we test, the sizing specified in CSS media queries has no effect and we are left having to zoom in.
EXAMPLE:
temp.mosaranch.com/chatbot-tester
QUESTION:
What could cause mobile browsers to not render specific media-query CSS rules, while the rules are applied when scaling down on a desktop browser?
You need a viewport meta tag in order for media queries to work properly on mobile devices.
Read more at MDN: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
I'm new to this and not really understand why is this happening and how to solve this.
I'm building my web-site with #media queries to be mobile-friendly. When I'm accessing the site from mobile I see the mobile-friendly version as I should, but when I'm trying to switch for desktop-view, the mobile-friendly version is remained and the desktop(normal) isn't showing.
With my *.css file I did as following:
my styles for global(normal - desktop) view
...
...
...
#media (max-width:500px){
my styles for mobile-friendly view
}
I don't want to use #media for my desktop view as not all browsers support #media, just in case some one will think it may solve this problem.
Hope for your help
Always ensure you include the following <meta> tag within your <head> </head> element:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
The viewport tag is used to serve your website in a certain style regardless of device. The width property controls the size of the viewport (the virtual "window") and can be set to a specific pixel size, or the width of the device. The initial-scale property controls the zoom level when the page is loaded. maximum-scale, minimum-scale, and user-scalable all control how users are allowed to zoom the page in out out.
I personally have disabled user-scalable to keep a consistent page view, like when a user focuses on a select element it ensures the page does not zoom. Let me know if this fixes your problem, otherwise I will need some example of your CSS to figure out your problem! Cheers ~
The only browsers that do not support media queries are IE 5 to 8. IE 9+ supports it. Less than 1% of my website views come from an Internet Explorer browser, so in my opinion I would not sacrifice a good design for IE. I would recommend to always code mobile first, and after implement size specifications.
Implementing the viewport in the head section of your page is a must.
<meta name="viewport" content="width=device-width, initial-scale=1">
I wouldn't use a max-width:500px since this is a random max width... Stick to the correct ones, and your CSS will look like this:
*-- SINCE WE ARE CODING MOBILE-FIRST, WE DO NOT NEED A MEDIA QUERY FOR IT --*/
Enter all base code here
/*-- TABLET --*/
#media(min-width: 641px) {
...
}
/*-- SMALL DESKTOP --*/
#media(min-width: 768px) {
...
}
/*-- DESKTOP --*/
#media(min-width: 992px) {
...
}
/*-- BIG DESKTOP (rarely used, but can be useful) --*/
#media(min-width: 1280px) {
...
}
Coding mobile-first CSS will simplify your code and create a solid style base. Switching your habits to mobile-first coding will be a plus for you and the designers that may eventually need to work with your layouts. This should be considered an effective method to help create bulletproof responsive designs.
I used to start my work using html5-boilerplate instead of creating file from scratch. It is awesome for responsive web design.
I am developing a non-responsive website and client needs desktop version for mobiles too (remember how websites opens on mobile few years ago).
I did not make it responsive and do not add any styles in media queries.
I works fine on desktops but when we see the website on a mobile device(or less 940 px wide screens) it does not show complete backgrounds of full width containers(i.e. 100%) instead it only show the background according to width of device.
I am not sure but I think there is problem in following code which is meta viewport:
<meta name="viewport" content="width=device-width" />
I removed this code and test the website but problem remains. Can any one please tell me the solution?
Note: I have build the most of site and now I can not write markup from scratch.
I have found an easiest possible solution to this and its working for me. I just added following code into CSS file (my media query section of at bottom of main.css in case html boilerplate).
#media only screen and (max-width: 900px) {
/* Style adjustments for non responsive websites */
body{width:940px;}
}
Try changing it to the following:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Let me know if it works!
I am trying to get this working but somehow its not working in mobile. when i use chrome tool to overrides the screen size, it works fine. i am not sure what i am doing wrong. please help
#media screen and (min-device-width : 320px) and (max-device-width : 480px) {
.container .backgroundImage { display: none; }
}
There is a background image when viewed in browser. s i would like to remove that image when viewed in mobile BUT its not working somehow.. please help
=============
TESTING ON IPhone 3G, 4, 5, Android Galaxy Nexus
#Andy is right, double check your device-widths, or you could always just use min-width so you don't have to know every device width.
Regardless make sure you have a viewport tag, like <meta name="viewport" content="width=device-width,initial-scale=1.0">.
Fantastic - forgot the viewport too!
Fot all:
Just add
<meta name="viewport" content="width=device-width,initial-scale=1.0">
in your head
I know this is an old post, but I recently had an issue like this. I ended up fixing it by removing the CSS media query from the main CSS stylesheet, and entering the specific needs for mobile on the html style section instead. Don't know why it worked, but it did.
Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read. Setting the viewport meta tag lets you control the width and scaling of the viewport so that it's sized correctly on all devices.
Thus this worked for me:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
I'm having a strange problem that only occurs with IE9. I'm working on a web page that has a desktop layout, and a mobile layout. Same HTML, different CSS. The problem happens with the code below:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (max-device-width: 640px)
All browsers, with the exception of IE9, show desktop site as needed. Mobile browsers correctly show the mobile layout. The problem with IE9 is that it also shows the mobile layout.
Now if I remove the words "only" and "screen" from the above code, IE9 then correctly displays the desktop site. The problem is, then the mobile browsers also display the desktop site. I've done some research on this, and haven't seen anything on this issue.
Thanks for reading,
John
Just in case anyone is crawling SO for an answer to this, the above two answers aren't solving the core problem which is answered here - CSS media query not working in IE 9
Basically inline CSS3 media queries DO work in IE9 but you have to disable Compatibilty mode -
<meta http-equiv="X-UA-Compatible" content="IE=9">
The above meta tag needs to be placed before any other meta tags otherwise IE9 will default to compatibility mode on and will subsequently not work.
From what I can tell, it comes down to IE9 not interpreting "min-device-width" and "max-device-width".
According to http://msdn.microsoft.com/library/ms530813.aspx it does not support those properties, only "min-width" and "max-width".
In addition, http://www.w3.org/TR/css3-mediaqueries/#error-handling states that the browser is supposed to ignore properties that it does not recognize. Not so with IE9 it seems.
Yes, use the #media (max-width: 860px) instead of max-device-width.
IE 9 just gave me a heart attack. The project media queries did not work.
Then after some minutes of googling, you have to include the CSS in the HTML.
Inline styles only!
What a drag these IE browsers are!
I usually add this to my projects and it's been working for me so far:
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
IE compatibility mode solves the issue.
Go to Compatibility View Settings and disable the option Display intranet sites in Compatibility View.