I have this media query:
#media only screen
and (max-width : 320px),
only screen
and (max-device-width : 320px)
and (min-device-pixel-ratio : 2),
only screen
and (max-device-width : 320px)
and (-webkit-min-device-pixel-ratio : 2),
only screen
and (max-device-width : 320px) {
It selects browsers on a desktop less than 320px in width, iphone 4's in portrait but it also selects iphone 4's in landscape. Surely this should NOT select iPhone 4's in landscape?
From my understanding the first part selects screens less than 320px in width.
Second part same as second but with webkit vendor prefix
Third part selects screens on mobile devices less than 320px in width but with double pixel density (iPhone 4/4s in this case)
and fourth part is same as previous two but without double pixel density therefore should select iPhone 3gs and other mobiel devices which have 320px max width screens. I therefore, based on the above do not expect it to select landscape mode on any iPhone?
Any ideas how to add to it to solve that?
Neil
You should add orientation : landscape to your CSS, like this:
#media only screen
and (max-device-width : 320px)
and (orientation : landscape) {
/* Styles */
}
Related
I've seen the CSS media query below recommended to target phones. Yes, it works for my phone. However, my phone, and many others, have resolution width 1080px. How does it work...?
#media screen and (max-width: 1024px) { }
Every devise has physical pixel size and a ratio for browsers. For instance iPhoneX has with 1125px and a ratio 3. So the CSS width will be 375px.
So for it's screen with physical resolution 1125px your media will be
#media screen and (max-width: 375px) { }
Very good table with devises resolutions, ratios and CSS scale here:
https://www.mydevice.io/#compare-devices
Although you can determine in media the -webkit-device-pixel-ratio and orientation, like this
/* iPhone X in landscape */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) { /* STYLES GO HERE */}
More about it here http://stephen.io/mediaqueries/
I am working on a side project and using Bourbon Neat as my grid. I have a few media queries targeting specific mobile devices such as iPhone 5, iPhone 6, and iPhone 6 Plus. My question is am I able to target a specific device, without carrying the styles over to another device? For example, I have a media queries set up for iPhone 6 and iPhone 6+. Here is what my media queries look like...
/* iPhone 6+ in portrait & landscape */
#media only screen and (min-device-width : 414px) and (max-device-width : 736px) {
/* STYLES GO HERE */
}
/* iPhone 6+ in landscape */
#media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) {
/* STYLES GO HERE */
}
/* iPhone 6+ in portrait */
#media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) {
/* STYLES GO HERE */
}
/* iPhone 6 in portrait & landscape */
#media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
/* STYLES GO HERE */
}
/* iPhone 6 in landscape */
#media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {
/* STYLES GO HERE */
}
/* iPhone 6 in portrait */
#media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {
/* STYLES GO HERE */
}
What I am ruining into is some changes I make in the iPhone 6 landscape media query seem to get applied to iPhone 6 Plus landscape, the iPhone 6 media query changes will override my iPhone 6 Plus changes. Again, am I able to only target a specific device without those changes being applied to other devices with similar pixel width? Any and all help or feedback is much appreciated. Thank you.
Again, am I able to only target a specific device without those
changes being applied to other devices with similar pixel width?
To answer your specific question, you cannot target by device via CSS other than by using widths, heights, etc.. but that's not really targeting the browser. So the answer is no. This requires knowing more than just what the width, height, or orientation of the browser is. And even if you could, I'm not sure you'd want to as it's not a very clean solution IMO.
If you absolutely must target by device you'll need to use server or browser side code. Here are some non-CSS solutions if you'd like to look into them:
1) You can use javascript:
http://hgoebl.github.io/mobile-detect.js/
2) Or you can use a server side library like:
http://mobiledetect.net/
But a better solution would be to structure the CSS to make sure that the styles are not overriding each other.
You can find out the device resolutions you are trying trying to target and be more specific in your media queries. For example, to target an ipad in portrait mode:
#media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait)" {
/* styles */
}
Or for an ipad in landscape mode:
#media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
/* styles */
}
However, with this technique there is no guarantee you won't end up apply the styles to another device with the same resolution. The safest way to target a device is using javascript and some OS/device sniffing.
i'm using an emulator currently at http://mobiletest.me/ but my site is all over the place. The media code i'm using is this:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait)
but it isn't seeming to use this media query and is using my other query for ipad with is #media (max-width:768px)
I am using this meta in my html:
<meta name="viewport" content="width=device-width, initial-scale=1">
I have the media queries in descending order 1600px 1280px 768px etc.
try to use :
#media only screen and (min-width:320px) and (max-width: 568px){}
device-width refers to the actual width of the device someone's using, not the viewport width.
In your example:
#media only screen and (min-device-width : 320px) and (max-device-width : 568px)
Could target iPhone 4's 'portrait' view (640px).
This is important because the iPhone 4 (and many other mobile devices for that matter) for example crams in 2 pixels per 'CSS' pixel. This means the device-width of the iPhone 4 is 320px / 480px, whereas the viewport width is actually 640px / 960px.
How to target media queries for Samsung tab 8.4 inch.
my code is
#media (device-width: 800px) and (device-height: 1280px)
when first appearance media query is getting affected. once changed the orientation from Portrait to Landscape and again back to Portrait, style is not getting affected.
Device Specification :
http://www.gsmarena.com/samsung_galaxy_tab_s_8_4-6439.php
Thanks in advance
I can't test my solution on physical device, but you can play with orientation:
Landscape mode
#media only screen and (max-device-width : 1280px) and (orientation : landscape) {
/* Styles for landscape*/
}
Portrait mode
#media only screen and (max-device-width : 800x) and (orientation : portrait) {
/* Styles for portrait*/
}
Notice, that different browsers (chrome, android native browser, firefox etc.) handle media queries in different way. For example if you use:
#media only screen and (max-width : 480px)
it would work on Desktop Chrome browser and on android smartphone browser, but not on Safari on iPhone. To make it work on Safari you have to use:
#media only screen and (max-device-width : 480px)
The conclusion is that you need test your media queries on physical devices :)
For more information, check this page: http://www.w3.org/TR/css3-mediaqueries/
I am using iPhone4 to test my responsive website
I had read that retina display will show 1px as 2px...
so my doubt is in landscape the device width 480px, screen resolution 640px..
but which one i want to use
#media only screen (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
or
#media only screen (max-device-width : 640px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
No matter what their resolution, you target all iPhones at 320px in portrait mode, and iPhone4S and under stick with 480px in landscape mode. (5 is a little wider in landscape.)