My media Query for iPhone 5 Landscape mode doesn't work. It triggers the media query of iPhone 6 instead of iPhone 5. The portrait mode works perfect though.
Following are the queries for iPhone 5
/* iPhone 5 (landscape) */
#media only screen
and (min-width : 320px)
and (max-width : 568px)
and (orientation : landscape) {
}
/* iPhone 5 (portrait) */
#media only screen
and (min-width : 320px)
and (max-width : 568px)
and (orientation : portrait) {
}
I tried using the max-device-width and min-device-width also. I do have
<meta name="viewport" content="width=device-width, initial-scale=1"> included in the HTML.
Using the (-webkit-device-pixel-ratio: 2) or (device-aspect-ratio: 40/71) is not working and is also messing up the portrait mode as well.
I've been trying to fix this and would appreciate any help on this.
Related
I have a web page that displays properly for an iphone 6. Is there an easy way to adjust the screen size with a media query for an iphone 5 so everything will shrink down properly?
I know how to trigger CSS for an Iphone 5 what I'm looking for is a way to easily set up CSS so it's just one CSS command to reformat for the iphone 5. Let's say you have it all working for an Iphone 6, could we just set a reduced width for Iphone 5 and have everything automatically scale down?
Only iPhone 5 (portrait mode)
#media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait)
{
...
}
Only iPhone 5 (landscape mode)
#media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:landscape)
{
...
}
Another useful media feature is
device-aspect-ratio
Note that the iPhone 5 does not have a 16:9 aspect ratio. It is in fact 40:71.
iPhone 5:
#media screen and (device-aspect-ratio: 40/71) {}
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.
I'm trying to use media queries, however they aren't working when I go to my iPhone. When I resize my browser window it works fine though. They look like the following:
#media (max-width: 480px){...}
And I've including the following meta tag at the top of the file:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Any idea why it wouldn't be working properly?
EDIT
Try this:
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
You can use this as reference for iPhones.
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/