I've been working on this for about a week on and off. I put the following media query in my code and it runs on my iPhone 5s as well. I only want it to work on Retina Tablets & iPad Only
#media only screen and (min-device-width : 768px)
and (max-device-width : 1024px),
and (min-device-pixel-ratio: 2),
and (-o-min-device-pixel-ratio: 2/1),
and (-webkit-min-device-pixel-ratio: 2),
and (min--moz-device-pixel-ratio: 2) {
Retina iPad CSS Only
}
Some suggested that the it should be this, but I didn't get any better results...
#media only screen and (min-device-width : 1536px)
and (max-device-width : 2048px),
and (min-device-pixel-ratio: 2),
and (-o-min-device-pixel-ratio: 2/1),
and (-webkit-min-device-pixel-ratio: 2),
and (min--moz-device-pixel-ratio: 2) {
Retina iPad CSS Only
}
Wow, after posting this and sending out a SOS via Twitter I finally figured it out...
I had to separate the media queries. Not sure if it's the best way but it works!
#media only screen and (min-device-pixel-ratio: 2),
and (-o-min-device-pixel-ratio: 2/1),
and (-webkit-min-device-pixel-ratio: 2),
and (min--moz-device-pixel-ratio: 2) {
#media (min-device-width : 768px) and (max-device-width : 1024px) {
Retina iPad CSS Only
}
}
Related
I wrote media queries for iPhone 4/4S, iPhone 5/5S, iPhone 6 and iPhone 6Plus.
Here is the code:
/*For iPhone 4/4S*/
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation: portrait){ /*my styles here */ }
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation: landscape){ /*my styles here */ }
/*For iPhone 6*/
#media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) { /*my styles here */ }
#media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) { /*my styles here */ }
/*For iPhone 6plus*/
#media only screen and (min-device-width : 414px) and (max-device-width :
736px) and (orientation : portrait) { /*my styles here */ }
#media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) { /*my styles here */ }
For portrait mode, each device's portrait css gets applied successfully. But for landscape mode of all devices, only landscape media query of iPhone 6Plus is getting applied.
How can I fix it?
If you wanted to apply a set of styles if the viewing device either had a minimum width of 700px or was a handheld in landscape, you could write the following:
#media (min-width: 700px), handheld and (orientation: landscape) { ... }
Above, if I were on a screen device with a viewport width of 800px, the media statement would return true because the first part, interpreted as #media all and (min-width: 700px) would apply to my device and therefore return true, despite the fact that my screen device would fail the handheld media type check in the second media query. Likewise, if I were on a handheld device held in landscape with a viewport width of 500px, while the first media query would fail due to the viewport width, the second media query would succeed and thus the media statement would return true.
comma-separated lists
Comma-separated lists behave like the logical operator or when used in
media queries. When using a comma-separated list of media queries, if
any of the media queries returns true, the styles or style sheets get
applied. Each media query in a comma-separated list is treated as an
individual query, and any operator applied to one media query does not
affect the others. This means the comma-separated media queries can
target different media features, types, and states.
reference
I have been testing media queries on Browserstack, I need to make specific changes to the page layout for iPads. I can get media queries to work on the desktop version of the site but I can not get media queries to work for all iPads. The following media queries work but only on the latest iPad version which Browserstack refers to as iPad 3rd(7). i have been referencing this site for media queries.
http://code-tricks.com/css-media-queries-for-common-devices/
This first one is the only one I have had success with, but only for iPad3, nothing else works for other iPad versions.
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
h1.iPadThis {color:black;}
}
This should work for all ipad versions but only works for iPad 3
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
h1.iPadThis {color:orange;}
}
I have tried the following for iPad 1 and 2 but it does not work on Browserstack.
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1){
h1.iPadThis {color:orange;}
}
And I have this in the head
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">
Can anybody tell me what I am doing wrong here?
Thanks.
you also try this :
#media (min-width:600px) and (max-width:767px) {
h1.iPadThis {color:orange;}
}
or
#media (max-width:767px) {
h1.iPadThis {color:orange;}
}
I need query for mobile iPhone 5 and galaxy S4 landscape view...
Her is my code but something is not ok here.
#media
(max-width : 800px){
// style
#media
(max-width : 360px){
//style
On resolution 360 evrything is ok, What i need to enter for landscape view.
Here is EXAMPLE
From this site:
iPhone 5 in landscape
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape)
{
/* STYLES GO HERE */
}
Samsung Galaxy S4 Landscape (from here)
#media screen (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)
and (device-width: 1920px)
and (orientation: landscape) {
/* Your styles here */
}
Use device-aspect-ratio for iPhone 5 - it does not have a 16:9 aspect ratio. It is in fact 40:71.
iPhone 5 only:
#media screen and (device-aspect-ratio: 40/71) and (orientation:portrait) {
/*style here*/
}
Galaxy S4 only:
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
/*style here*/
}
I have the following:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
.textular {
font-size: 10px;
}
}
I got this from http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ and I only need that above code. It doesn't seem to work. Am I doing something wrong?
I wouldn't use (orientation: landscape) - you're much better off just defining more detailed media queries as this will take into account whether or not the tablet/iPad is in Portrait.
These are the media queries I use:
LANDSCAPE TABLET (min-device-width : 901px) and (max-device-width : 1024px)
PORTRAIT TABLET (min-device-width : 721px) and (max-device-width : 900px)
MODERN SMARTPHONES (min-device-width : 481px) and (max-device-width : 720px)
1ST GEN SMARTPHONES (min-device-width : 361px) and (max-device-width : 480px)
LOW-RES SMARTPHONES (max-device-width : 360px)
You also have to take into consideration whether or not the device is retina or non-retina. To show you an example, you would include (-webkit-min-device-pixel-ratio:2) in your media query.
One thing you should check to see if it's the problem - in your original class 'textular', do you define font-size? I'm sure the problem is something very trivial.
i'm currently having troubly with a site that i'm converting to a adaptive-website. For some reason i can only get one of the orientations to work on the iPad. If i comment out the landscape styling the portrait styling works on the ipad and visa versa. I really don't understand what it is that i am doing wrong...
These are the media queries that i am using:
#media all and (device-width : 768px) and (orientation: landscape) {}
#media all and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait){}
Here is a link to the site www.imarken.dk
The problem is in min-device-width. Try to use 481 instead 768.
Give these a whirl:
#media only screen and (device-width: 768px) {
/* targets iPad */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* targets iPad Portrait */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* targets iPad Landscape */
}
I had this same problem today! As it turns out, removing my height=device-height in the meta viewport tag fixed the issue and allowed the CSS to switch between portrait and landscape as expected. Hope this helps!