Well, it's similar to My iPhone 6 gets the iPhone 5 media query ques, but I am still unable to figure out the answer.
I have a CSS written in Iphone 5/SE media query as below :
'#media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2)' : {
shippingPrice : {
fontSize : '12px',
width : '29%'
}
}
The same CSS is getting applied for Iphone 6/7/8 devices as well. I am using CSS in JS.
I used iPhone 6 and 4 to check if another stylesheet is being applied. It did not. Here are my stylesheets:
<link rel="stylesheet" media="screen and (max-width: 800px)" href="mobileindex.css">
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="desktopindex.css">
Yes, there is a gap in them. That space is reserved for tablets later on. For some reason, the mobileindex.css wasn't applied with those settings. I have to switch orientation twice for it to appear. This, however, fixes the problem:
<link rel="stylesheet" media="screen and (max-width: 1000px)" href="mobileindex.css">
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="desktopindex.css">
Is 800px not enough for an iPhone 4 and 6? How come it works now? The page where this happened is msolonko.net.
Can you please add the media queries below your main style and after that check your Web Application in your Mobile device.
#media screen and (min-width:768px) and (max-width:1024px) {
/*Your Mobile Style will be here.*/
}
The main thing is that you are applying the wrong min-width and max-width for iPhone6 device. The real size of the iPhone6 for responsive design is below.
iPhone 6 Portrait
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
/*Your Mobile Style will be here.*/
}
iPhone 6 landscape
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
/*Your Mobile Style will be here.*/
}
background-size:cover does not seem to work on iPhone 3. I've read somewhere that using background-size:100%; instead should solve the problem, and it does. However, it makes the background on Iphone 4 look ugly.
I've searched on the internet but all I find are queries for both the Iphone 3 and 4. Is there a media query for JUST the iPhone 3?
EDIT: I posted my solution in the answer below
I found a solution for my problem.
This blog post has a list of media queries for specific iPhone versions.
<!-- iPhone 2G, 3G, 3GS Portrait -->
#media only screen and (device-width: 320px) and (orientation: portrait) and not (-webkit-min-device-pixel-ratio: 2) {
/* CSS3 Rules for iPhone in Portrait Orientation */
}
<!-- iPhone 2G, 3G, 3GS Landscape -->
#media only screen and (device-width: 480px) and (orientation: landscape) and not (-webkit-min-device-pixel-ratio: 2) {
/* CSS3 Rules for iPhone in Landscape Orientation */
}
As you can see it only targets up to 3GS.
I built a HTML5 webapp for iPad which used the splash screen for landscape and portrait mode.
I used the below link tags to get it to work.
<link media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="{{MEDIA_URL}}ipad/img/Default-Landscape.png" rel="apple-touch-startup-image"/>
<link media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="{{MEDIA_URL}}ipad/img/Default-Portrait.png" rel="apple-touch-startup-image"/>
The images work well for iPad1 and 2 however, with iPad3 the splash screen in landscape mode appears out of place, the portrait mode works okay. Do I have to use a different image for landscape mode or have to change the link tag?
Size for high-resolution iPad launch images (in pixels):
1536 x 2008 (portrait)
2048 x 1496 (landscape)
Source: apple
Add this to your media query:
and (-webkit-min-device-pixel-ratio: 2) to target the new iPad, e.g:
<link rel="apple-touch-startup-image" href="img/ipad-landscape-retina.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" />
Why isnt the following media query being picked up on iPads in landscape mode?
#media all and (min-device-width: 1000px) {
css here
}
Or
#media all and (min-width: 1000px) {
css here
}
I want this css to target any browser which is 1000px wide or over, not just ipads. For this reason id rather work with the 2nd option of min-width not min-device-width if possible. Both versions work fine with firefox on my PC.
Thanks
The iPad is always reporting its width as 768px and its height as 1024px, so you have to find out how it is rotated with orientation and use min-device-height:1000px like so:
/* This will apply to all screens with a width 999px and smaller */
* {
color:green;
background-color:black;
}
/*
This will apply to all screens larger then 1000px wide
including landscape ipad but not portrait ipad.
*/
#media (orientation:landscape) and (min-device-height:1000px),
all and (min-width:1000px) {
* {
color:white;
background-color:red;
}
}
Results:
iPad
Portrait - green text - black background
Landscape - white text - red background
iPhone
Portrait - green text - black background
Landscape - green text - black background
Computer (resolution)
1680x1050 - white text - red background
800x600 - green text - black background
Using chrome & firefox (does anyone even use IE anymore?)
References:
w3 media queries
Safari CSS Reference
Optimizing Web Content
From http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
/* iPad [portrait + landscape] */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.selector-01 { margin: 10px; }
.selector-02 { margin: 10px; }
.selector-03 { margin: 10px; }
}
It looks like the screen attribute may be required.
If found this works great for the new iPad
#media screen and (orientation:landscape) and (min-device-height:1000px) and (-webkit-min-device-pixel-ratio : 2) {
* {
color:white;
background-color:red;
}
}
For the record, I'm not sure why
#media (min-width: 1000px) {
/* css here */
}
didn't work for you. Possibly something changed with the iPad since this question was first posted?
Here's a working example:
live view: http://fiddle.jshell.net/panchroma/Bn4ah/show/
edit view: http://fiddle.jshell.net/panchroma/Bn4ah/
Also be sure to include
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the head of your page.
I was trying to use a simple media query like this:
#media only screen and (min-width : 768px)
{css here}
but I wouldn't trigger on an iPad pro 10.5' I was testing on, I increase it to 900px (for portrait) and it worked just fine, I think because of the retina display you need to compensate, it may work fine on old iPads non-retina.
Trying to write a media query for tablet, I actually encountered the problem of the iPad underreporting its dimensions. When I tried to use #media screen and ( min-width: 768px ), my styles were being applied to other tablet devices, but ignored by the iPad. I started playing around with the Responsive device model in developer tools, and I stumbled onto the solution. For some reason, my styles would apply when I sized the screen down to 760px. So, I edited the media query to read #media screen and ( min-width: 760px ) and everything started working as expected.