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>
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 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 -
}
I'm working with CSS Media Queries to load different templates for differently sized devices. I created a spreadsheet listing the display resolution of testing devices and the most common devices to come up with the size cut-offs. One of the devices that I'm testing is the Nexus 7 of which I've found the display resolution to be 1280 × 800. However when I use these values in my code, it doesn't work.
**the only reason I'm using no max or min is because I'm trying to find the exact resolution. If I replace with max-device-width with something rather large, it works and I've done enough testing to know that it works with various max values given but in order to properly complete my code to differentiate between 3 differently-sized device categories, I have to make sure I'm creating the right cut-offs. Is CSS resolution different? Thanks for any and all help in advance!
#media only screen and (device-width:1280px) and (orientation:landscape) {
/*style --code removed for sack of space */
}
#media only screen and (device-width:800px) and (orientation:portrait) {
/*style --code removed for sack of space */
}
Here is my viewport code in my html file
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
There is a difference between screen dimensions in CSS pixels and device pixels.
In the case of the nexus 7, the native device pixels are 1280 x 800 pixels.
However, if this was the reported width for media queries we'd end up with responsive designs being triggered for traditional desktop sizes.
As a result, many browsers settle on a CSS pixel size that more closely resembles the size of traditional pixels before high pixel density displays. Pretty much iPhone 1 - 3 pixel size.
The device-pixel-ratio reports (device pixels / CSS pixels)
e.g. 800 / 600 = 1.3333
To add even more confusion, these ratios sometimes change across OS releases. For example, as of Jelly Bean 4.2 my nexus 7 reports a width of 600px in portrait, down from 603.
This makes it difficult to target exact devices with width based media queries. I recommend accepting that you're designing for a huge number of device widths and attempt to create a responsive design that adapts between the range of device sizes that you choose to support.
Best of luck :)
Use the following viewport code:
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
or this for not allowing scaling:
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
The weird part about the Nexus 7 is that (as jpgr posted) it doesn't allow you to use the 1280/800 space that it boasts (out of the box at least). It is almost as if it is running zoomed in to some degree despite scaling preferences being set.
I notice this issue when my graphics seems slightly blurry. I tested the window size via javascript and it was posting numbers about 25% lower then expected. You will notice I have exclude the scaling parameters as it seems to ignore them for the most part.
The real key is using the target-densitydpi = device-dpi... This seems to make very right as rain.
Love working with the Nexus 7 for sure!!!
Overly pragmatic answer, but you can basically use the screen size of 601x880 to target the Nexus 7. Not technically complete, but should be enough to get you started if you are trying to use breakpoints in your media queries.
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