I have 4 media queries. The 1st, 3rd and 4th work, but the 2nd one doesn't seem to activate.
Why is the 480x720 (second media query) defaulting to the first media query?
#media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }
#media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }
#media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }
#media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }
What is expected:
What is actually happening:
Why is the 480x720 (second media query) defaulting to the first media query?
I am a newbie on android and CSS.
I resolved the android not giving they real size with one line in the header of my index.html file:
<meta name="viewport" content="width=device-width" />
From then on, my CSS files did what I expected!
So after doing LOADS of research i have come to this conclusion, Android phones that say they are 480px by 720px (800px or 854px) are actually not, they use a higher screen density to make elements look larger so they actually run at 320px by XXX, but the user can change the resolution to a lower spec if they so wish. The reason that the media query was not working, was because the sizes were not relevant to the device in question.
If your on the SDK i changed the screen density down to 160 to accommodate 480px wide.
And i can confirm i have tested this on the SDK and 2x Handsets.
Note: this was my personal experience it might be different for other users
I think you need to do a device resolution detection in your media query along the lines of
#media (-webkit-min-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(min--moz-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5) {
/* high resolution styles */
}
Check David Calhoun's excellent article on mobile best practices.
I was having the same problems while working on a Cordova application for Android platform. Thanks to the last answer, I tried to find out where were the differences between my media query and the width of the devices screen.
I first tried :
#media only screen and (max-device-width: 480px) { ... }
To match devices like HTC Desire HD | Samsung Galaxy S. But I also had to do specific corrections for the Samsung Galaxy Note, so I used :
#media only screen and (min-device-width: 481px) { ... }
But those resolutions, as said before, are not really used like that in the web view, the pixel density has the values changed.
So I wanted to know how many pixels in width were recognized in both DHD and SGS, and then in SGN :
window.innerWidth
For the 480px width phones, I had actually 320px recognized. For the 800px Galaxy Note, I only had 500px recognized. When I saw that, I adjusted my media queries and it worked.
here are a few things I have found in my experience and it may be due to the higher resolution detection.
My favorite test phone is 320px(max-device-width) X 480px(max-device-width) in portrait view. But depending on which mobile browser I use the max-width can be up to 850px!! Opera mobile uses 850px as its default max-width, even though its on a device of max-device-width 320px. Better yet; the built in Andriod browser on this device has a default max-width of 550px. Dolphin defaults to the same max-width, 550px. I don't usually test on FireFox mobile but since it is a gecko based browser like Opera, I wouldn't be surprised if it falls into the 850px range. Does anybody know or tested it?
i typically use a 3 condition media query when addressing 320 X 480 devices.
#media all and (max-width:850px) and (max-width:550px) and (max-device-width:320px) {..}
also i usually place this meta tag in my header on the main pageenter code here
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
The following didnt seem to help me, that's when I did some more research and figured out the info above.
<meta name="viewport" content="width=device-width" /> Hope it helps someone else.
Since cell phones are an ever-growing black hole of resolution confusion, you need to tell them to identify themselves. You also need to set the scaling to 1 and take away user scaling. When I put this in my code, it does the trick for me.
Insert this snippet in the head of your HTML on the line below the <meta character...> tag.
<!-- Check Device Width so Media Queries will work -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Convert all px values to em values by dividing them by 16 (so 16px will become 1 em). This makes sure, that sized have the correct proportion regardless on which font is used.
Add to your meta viewport: target-densitydpi=medium-dpi. This makes sure, that the em- sizes behave equally on all (most?) devices
Related
I'm building a mobile web app and I created this media query to target phones with a lower screen height than the iPhone X+ (812px) :
#media (max-height: 811px) {
}
It works perfectly on iOS devices but when I launch the app on a Huawei P30 pro, which clearly have a bigger screen than the iPhone, it enter in the above media query and the viewport height seems to be only 755px.
Why did the Huawei, with a bigger screen, have a smaller viewport height ?
What can I do to target only phones that have a physically smaller screen than the iPhone X ?
You could make this change in your index.html - This is the one I would say is likely to be the issue for you
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
Or you could try this change in your CSS
#media screen and (max-device-height: 811px) {
}
I have a responsive site built with some media queries: mobile, tablet, and desktop. When I view my site on my 7 inch samsung galaxy tab 2 vertically i get the mobile view, and when I view it horizontally it appears as my desktop view.
So my questions is, is this happening because of the device's display itself and where I set my break point? Or does it have something to do with the wrong meta? Or maybe something different altogether?
Meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
Example of media query
#media all and (min-width: 670px)
Thank you.
The Samsung Galaxy Tab 2 has a resolution of 1024x600px. Therefore, styles set within the media query you've provided will not be applied when the tablet is in portrait mode, since the viewport width will only be 600px.
I'm editing other people's CSS. They've used two media queries for iPad (one for portrait, one for landscape) that seem to be causing problems on some larger Android phones and phablets.
What I find so strang is that the CSS they have used is being recommended by just about everyone, even though it is highly vulnerable on Android devices.
What this query does is:
It uses a combination of min-device-width and max-device-width to ascertain that the device is an iPad.
It uses the 'orientation' parameter to figure out if the device is portrait or landscape (on iOS devices, the device-width is always the width in portrait mode, even if the device is currently in landscape).
This is the CSS that seemed to be causing the problem:
/* iPad Landscape */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* CSS */
}
/* iPad Portrait */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
/* CSS */
}
Now the problem is that defining a minimum and maximum device width leaves a lot of room for these styles to be applied to other devices as well. Anything with a width between 768px and 1024px is being treated as an iPad.
In my case, the style specifies that a custom button bar at the bottom of the screen be exactly 768 pixels wide. And some more stuff like that. That works on iPads but not on devices with similar but different widths. Buttons are falling off the screen on the Android devices involved.
So what I am using now is:
#media screen and (device-width: 768px) and (device-height: 1024px) and (orientation : landscape) { etc }
#media screen and (device-width: 768px) and (device-height: 1024px) and (orientation : portrait) { etc }
This seems to target exactly all iPads. I've understood that all iPads have a "device-width" of 768 pixels even if their resolution is higher.
So I'm pretty sure I'm doing it right. But since this is pretty common issue and everyone else is saying to use MIN-device-width and MIN-device-height, I'd still be really happy to hear someone else on this.
Media Queries are the correct way to target the device based on screen resolution.
This answer on another nearly identical question explains it best.
https://stackoverflow.com/a/9504571/2620028
We recently developed a website that essentially has 2 modes, mobile and a tablet + desktop one. The css file is laid out with mobile rules first, then there is a breakpoint for any sizes above 640px, so we could show the desktop version to the 7" tablets when on landspace.
However, although it is working great for all iphones, my galaxy s4, even the windows phone and of course for the ipad and desktop, some mobile phones pick up the desktop styles, essentially showing the desktop version, namely the galaxy s2 and the galaxy s3 among others.
As i said, my css code is built mobile first, so all mobiles with a width of less than 640px (pretty much all) should not pick up the desktop styles, the media query is as follows:
#media all and (min-width: 641px) { .... }
So i do not really understand why.. any ideas?
edit: I forgot to add we have added a conditional that will check whether the size of the device is larger than 640, in which case it sets the viewport size to the full width of the website so it scales down on tablets, or else it just sets it to device-width.
<meta id="testViewport" name="viewport" content="width=device-width, maximum-scale=1">
<script>
if (screen.width > 640) {
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=1000');
}
</script>
From what I search for Galaxy S3 Media Queries:
#media only screen and (max-device-width: 720px) and (orientation:portrait) {
.your-css{}
}
#media only screen and (max-device-width: 1280px) and (orientation:landscape) {
.your-css{}
}
Looks like thats what it actually looks for....You can try scaling it by changing viewport:
<meta name="viewport" content="width=device-width">
Also, You can add jquery to change sizes....Jquery:
// Check for device screen size
if($.mobile.media("screen and (max-device-width: 640px)")) {
// Change viewport for smaller devices
$('meta[name=viewport]').attr('content','width=device-width, initial-scale=1');
}
Also:
You can go open this in your s3 so you can get accuracy for your Galaxy media queries:
http://pieroxy.net/blog/pages/css-media-queries/test-features.html
Thanks for the input, i found the problem.
Some android versions have a bug where the viewport will not report correctly when the page loads, i was getting 800px viewport sizes reported for galaxy 1, 2 and 3 (!!!). The issue was fixed by adding a timeout of 200ms before actually checking the viewport width, it seems this small delay is good enough for the device to report back the right size.
It creates a small window of time (the 200ms) where the scaling of the desktop version is visible, but at least it solves the issue.
solution for anyone landing here having the same issue:
<meta id="testViewport" name="viewport" content="width=device-width, maximum-scale=1">
<script>
setTimeout(function(){
if (document.documentElement.clientWidth > 640) {
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=1000');
}
}, 200);
</script>
I'm using a mobile emulator that I'm paying for where I can view my mobile site on many different cell phones and the theme across all the android phones are that for some reason, my media queries are not working. They are working on the iPhone, but not sure what is going on with adnroid. This is what i'm using for the android media queries:
#media only screen and (max-device-width: 400px) {
- styles here -
}
#media only screen and (max-device-width: 600px)and (min-device-width:401px) {
- styles here -
}
I have those sections in my stylesheet, which when I am using dreamweaver, all the different resolutions look good in the mobile sizes. Then I was thinking.. oh wait, android is automatically scaling the screen to make them bigger, so I added this to the top of my index:
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
I added those, but STILL android isn't paying attention to the media queries for some reason. It's rendering the page as if the resolution doesn't match, even though the devices I have tried include a 480px X 800px so it should work there....
Anyone have any ideas? I know droid web page design info is kinda scarce.. but I'm hping there might be some gurus out there.... I stayed up all night last night working on this about 8 hrs straight lol.
EDIT: On further examination, it looks like anything less than 400px is working, however, it's the max and min device width being between 600 and 400 which is causing problems......
i removed the max-device-width:600px and it is now rendering the correct thing. not sure what had happened, but thats the answer, dk what i did.
Reorder your min value before the max value:
#media only screen and (min-device-width: 401px) and (max-device-width:600px) {
- styles here -
}