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.
Related
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 have this simple css block:
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) { // iphone 6
color: red;
}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) { //iphone 4S
color: blue;
}
When running on iphone 6, color is...blue.
(There are no other places where I define color property).
Why?
The width the iPhone 6 reports to browsers in portrait orientation is 375px. That means, your first color rule is overridden by the second color rule since the browser's reported resolution passes that media query. (It is between 320px and 480px.)
Since your media queries overlap, the last one will be used for browsers that pass both media queries.
I just seen a difference between iPad mini and a normal iPad or retina. When I load my website on iPad mini it looks ok. When is on iPad 2 or Retina everything is destroyed. I am using CSS media queries
#media (max-width:768px) and (orientation: portrait)
#media (min-width:768px) and (orientation: landscape)
Has anyone any idea?
If I test it in Chrome emulation selecting iPad 1/2/mini or iPad 3/4 everything looks fine
I've been using Apple's Xcode tool (iOS Simulator) to code iPad views. I can't target landscape view on the iPad Retina device.
I've been trying the following media queries...
#media only screen and (min-device-width : 768px) and (max-device-width
: 1024px) and (orientation : landscape) and ( -webkit-min-device-
pixel-ratio: 2){ //style goes here// }
#media only screen and (min-device-width : 1536px) and (max-device-width
: 2048px) and (orientation : landscape) and ( -webkit-min-device-
pixel-ratio: 2){ //style goes here// }
I can't find any other way to target the landscape view in iPad Retina. I have even tried this code in different parts of the CSS file, still no luck at all.
The first one is correct, i use the same media query and is working on a real device.
Maybe you forgot to include the meta viewport?
I've just realized my FTP program was not working correctly when I entered the editor inside the Wordpress dashboard (the query was not there) so I manually wrote it dawn directly on my theme's CSS file and it worked.This FTP program stole hours from me.. but the query was right and the meta tag as well.
All in all, for anyone experiencing issues while coding new iPads Retina displays (32 and 64 bits), they should include the meta viewport in their headers:
<meta name="viewport" content="width=device-width, user-scalable=no">
and the corresponding query (Landscape view, in this case)is:
#media only screen and (min-device-width : 768px) and (max-device-width
: 1024px) and (orientation : landscape) and ( -webkit-min-device-
pixel-ratio: 2){ //style goes here// }
I've developed this page:
http://bluebeam.com/us/support/ipad/
The media queries are working fine in every browser but when I test it on an ipad it does nothing... It just reverts back to normal CSS. I've cleared browsing data on the iPad without results. I can see it working on my iPhone.
Can anyone spot an issue with my code?
Edit: the first query (horizontal layout) is working. But the second is not triggering when I flip the ipad (vertical layout).
If I remember correctly the iPad swaps the width/height values when the orientation changes. I would try this:
/* portrait*/
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
/* landscape */
#media only screen
and (min-device-width : 1024px)
and (max-device-width : 768px)
Its been a year since I faced a similar problem so I could be a bit behind the times.