I am working with media query, for a desktop version of a website.
The behavior that I was looking for was:
- Full screen rendering
- No redimensionning when minimizing the viewport (the right sided content is hidden)
So I defined ranges of screen resolutions, and tried with min and max device width like this, on my .css file:
#media screen and (max-device width:1535px) and (min-device-width:1365px) {
html{
font-size:80%;
}
#mainframe{
width:1000px;
}
}
This is working well on chrome and firefox but after research device-width seems not to be compliant with ie 9. (min-width workà
( I added this meta tag on my html file :
<meta http-equiv="X-UA-Compatible" content="IE=9">
with no effect)
Is there a way to bypass this?
Related
I have a codepen here.
https://codepen.io/Teeke/pen/JjprQgj
If I press F12 and check the mobile layout on liveview, the text appears correctly centered, and horizontal scroll is disabled.
https://codepen.io/Teeke/live/JjprQgj
On moving to code sandbox:
text is no longer correctly centered,
picture is incorrectly sized,
horizontal scrolling appears.
https://codesandbox.io/s/pensive-heyrovsky-3vmtj4
Mobile display is not working in the chrome devtools emulator:
https://3vmtj4.csb.app/
I’ve made sure to add all libraries, include autoprefixer, and normalize.css. Also included the correct meta tags.
<meta name="viewport" content="width=device-width, initial-scale=1">
Media queries are all included.
#media screen and (max-width: 768px) and (min-width: 485px) {
form {
max-width: 70%;
}
}
Is there anything else I’ve missed?
I'm facing the problem with media queries on mobile devices.
I've got something like this:
#media screen and (min-device-width : 320px) and (max-device-width : 480px){
/* Some styles*/
}
I'm testing my website on Galaxy S6. In Firefox everything looks fine and styles do change but when i load the same website in Chrome - there's no change and it looks like the media query doesn't work.
Does Chrome need some special queries?
Add this meta tag into the header of your HTML file:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This should solve your problem. Otherwise the browser might not resize because it will not accept that the screen size is meeting your media query criteria.
I had this issue as well and I thought it was related to #media queries nesting (that only Firefox currently implements). Since it was a foreign huge CSS file I was dealing with, I wasted a lot of time separating each and every rule into more restrictive queries (ranges with min, max, pixel-ratio and resolution)...
Later I found that after this line:
<meta name="viewport" content="width=device-width,initial-scale=1">
In another template there was another line with:
<meta name="viewport" content="width=639, initial-scale=0.5, maximum-scale=1.0, user-scalable=no">
This was overriding the first rule and, with the exception of Firefox (mobile), it actually created a couple of problems:
all the media queries that had max-width under 639px were being ignored in Chrome (or the default Android browser);
queries with max-device-width syntax were also being ignored (only max-width ones worked).
So my suggestion is, before you head on checking all the problems in the CSS, have a look first at all the meta tags that may be affecting the viewport.
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.
On my site, im using standard css to apply for everything, except
#media (max-width: 480px) {
if my screen/browser is equal or lower than 480, it uses whatever thats under that media.
But my problem is that it dosent work on my iphone (iphone 5S).
I was able to find out that #media (max-screen-width: 480px) { would work, but then my browser width on 480 wont apply to it.
I have searched around different sites , but all i see of their entire css files, is that they only use max-width, and while vising their pages, it works great on my phone.
Question: How can i easily do so it would apply for both browser and screen/mobile?
just add this indise your head tag
<meta name="viewport" content="width=device-width">
and css:
#media screen and (max-width: 480px) {
// code goes here
}
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">