I've got a devices stylesheet that is loaded to deal with responsive design in a website, but I'm struggling to group a couple different media queries exactly how I want.
I've got a shared set of styles for a small web window, a mobile device at any rotation and an iPad in portrait only.
At the moment I'm getting everything except the iPad with this query:
#media all and (max-device-width: 480px), all and (max-width: 480px)
I'm getting the iPad in portrait with this code:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
How do I combine these two media queries?
Okay, for anyone with this problem.
To achieve this I ended up using the media queries to load the stylesheet, rather than embedding the media query in my stylesheet.
<link rel="stylesheet" type="text/css" media="all and (max-device-width: 480px), all and (max-width: 480px)" href="device.css" />
<link rel="stylesheet" type="text/css" media="#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)" href="device.css" />
Related
I'm doing a webpage that uses the startup image feature for iOS devices. For this task, I'm using a code placed on the footer that detects with javascript which iOS device is, and then loads the startup image for it. In this way, the site saves a lot of bandwith because it's downloading only one image instead of four.
But with the new screen size of the iPhone 5, my code needs some changes, but I can't figure out how to do these.
This is the code:
<script>
(function(){
var p,l,r=window.devicePixelRatio;
if(navigator.platform==="iPad"){
p=r===2?"http://example.com/ipad-portrait-retina.jpg":"http://example.com/ipad-portrait-non-retina.jpg";
l=r===2?"http://example.com/ipad-landscape-retina.jpg":"http://example.com/ipad-landscape-non-retina.jpg";
document.write('<link rel="apple-touch-startup-image" href="'+l+'" media="screen and (orientation: landscape)"/><link rel="apple-touch-startup-image" href="'+p+'" media="screen and (orientation: portrait)"/>');
}
else{
p=r===2?"http://example.com/iphone-retina.jpg":"http://example.com/iphone-non-retina.jpg";
document.write('<link rel="apple-touch-startup-image" href="'+p+'"/>');
}
})
</script>
As you can see, this work is intended for the iPad/iPhone with variables for the device orientation and the device pixel ratio. But the problem is that for the iPhone with retina display, there's no variable to determine if is the i5 or the i4/4S, so it just download the image for the 960x640 iPhone.
Do you have any clue on how to include a variable for device screen size?
A better way to do this is to use media targeting, rather than JavaScript.
Done correctly, the iPhone will only ever retrieve the image appropriate to its screen size and pixel ratio, so there is no need to resort to JavaScript.
Media Targeting
This works for iPhones;
<!-- iPhone 2G, 3G, 3GS -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px)" href="apple-touch-startup-image-320x460.png">
<!-- iPhone 4, 4S -->
<link rel="apple-touch-startup-image" media="(-webkit-device-pixel-ratio: 2) and (device-width: 320px) and (device-height: 480px)" href="apple-touch-startup-image-640x920.png">
<!-- iPhone 5 -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px)" href="apple-touch-startup-image-640x1096.png">
And for iPads;
<!-- iPad 1, 2, Mini - Portrait -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="apple-touch-startup-image-768x1004.png">
<!-- iPad 1, 2, Mini - Landscape -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape)" href="apple-touch-startup-image-1024x748.png">
<!-- iPad 3, 4 - Portrait -->
<link rel="apple-touch-startup-image" media="(-webkit-device-pixel-ratio: 2) and (device-width: 768px) and (orientation: portrait)" href="apple-touch-startup-image-1536x2008.png">
<!-- iPad 3, 4 - Landscape -->
<link rel="apple-touch-startup-image" media="(-webkit-device-pixel-ratio: 2) and (device-width: 768px) and (orientation: landscape)" href="apple-touch-startup-image-2048x1496.png">
More information on these startup images can be found at Stuff & Nonsense.
This will cause the device to download only the image appropriate to it.
Measuring device height in JavaScript
If you must use JavaScript for any reason (and I do advise against it), you can retrieve the device's height with window.screen.height. On 3.5-inch devices, it will be 480, and on 4-inch devices, it is 568.
For more information on measuring the viewport in JS, see ResponseJS' guide.
How do I target the different iphone4 orientations using media queries?
I have the current setup but im not certain it works.
#media only screen
and (max-device-height: 640px)
and (max-device-width: 960px)
and (min-device-width: 480px)
and (min-device-height: 480px)
and
#media only screen
and (max-device-height: 960px)
and (max-device-width: 640px)
and (min-device-width: 480px)
and (min-device-height: 480px)
I would figure this out myself if i had an Iphone to test on but I don't.
try this different,
<meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum- scale=0.6667, user-scalable=no">
I'm doing a Sencha Touch web app with splash screens specified as follows. The images are 640x920 and 320x460 respectively (allowing for the statusbar and following an example from Sencha).
<link rel="apple-touch-startup-image" media="screen and (resolution: 326dpi)" href="/resources/img/startup_640.png" />
<link rel="apple-touch-startup-image" media="screen and (resolution: 163dpi)" href="/resources/img/startup.png" />
However, on an iPhone 4, I'm still seeing only the low resolution image. (To make things easy, I've embedded the text "640x920" and "320x460" in the appropriate image to be sure I'm looking at the right images.)
I keep clearing the Safari cache and reloading the app, but the wrong image continues to load.
Just to make sure I had them right, I switched the links to point to the opposite files, but then as expected, neither splash loaded.
Any other suggestions?
EDIT:
Similarly, the apple-touch-icon-precomposed is loading the smaller of the two as well.
This will add a Splash Screen to your Web App. Below are the sizes you’ll need for both iPad and iPhone/iPod Touch, these include the status bar area as well.
<!-- iPhone -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone.jpg" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone-RETINA.jpg" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5 -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone-Tall-RETINA.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad Portrait -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iPad Landscape -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iPad Portrait (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad Landscape (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
If creating a Web App for iPad compatibility it’s recommended that both Landscape and Portrait sizes are used.
The lack of documentation certainly is frustrating. I found a solution and blogged about it here: http://paulofierro.com/blog/2011/8/31/icons-and-splash-screens-for-ios-web-apps-retina-displays-also-welcome
Basically the sizes property and media queries will not work. You have to inject the high-res startup image via JavaScript once your page is loaded. Hacky but works.
It seems at this point in time, Apple does not support a retina display resolution startup image. According to their docs...
On iPhone and iPod touch, the image must be 320 x 460 pixels and in
portrait orientation.
Nothing is stated in that article about supporting high-res startup images.
Another good discussion of this issue can be found here.
I am trying to develop a web app which applies an appropriate style sheet depending on the device (and its orientation).
I have 5 media queries in total:
//for mobile phones in portrait mode
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="css/mobile-portrait.css">
//for mobile phones in landscape mode
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="css/mobile-landscape.css">
//for tablets (iPad) in portrait mode
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="css/tablet-portrait.css">
//for tablets (iPad) in landscape mode
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="css/tablet-landscape.css">
//for desktop computers
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="css/desktop.css">
Everything works on the Desktop, iPad and the iPhone (in both browser and web app versions) but the landscape media query fails on Android's browser? Any ideas? Have I got the 'max-device-width' wrong?
That's because most newer android phones are something like 480 wide by 800 tall depending on device, so the way you have yours written, Android Landscape should be picked up by the tablet landscape css. But I think I ran into a similar issue with Android not picking up the stylesheet, so I added this and everything seemed to work...
<meta name="viewport" content="width=device-width">
Do you have this in your head above your stylesheet links?
On the Droid1 - the viewport size is 320 x 569.
For web apps you can set the startup screen with apple-touch-startup-image
What about for iPads?
I had the same issue as well... You need to you use a specific size of 1004*768. i explained it in this blog: http://www.amirnaor.com/?p=71
This will add a Splash Screen to your Web App. Below are the sizes you’ll need for both iPad and iPhone/iPod Touch, and iPhone 5. These include the status bar area as well.
<!-- iPhone -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-320x460.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-640x920.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iPhone 5 -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-640x1096.png"
media="(device-width: 320px) and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iPad -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-768x1004.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-748x1024.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- iPad (Retina) -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-1536x2008.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-1496x2048.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
If creating a Web App for iPad compatibility it’s recommended that both Landscape and Portrait sizes are used.
Portrait image needs to be 768x1004 (note: 1004, not 1024, 20px is for status bar), PNG is the preferred file format.
Landscape image needs to be 1024x748 (note: 748, again 20px for status bar). This image then needs to be rotated 90 degrees clockwise, end result is 748x1024.
Link tags in header need to be as follows:
<link rel="apple-touch-startup-image" href="images/splash_screen_768x1004.png" media="(device-width: 768px) and (orientation: portrait)" />
<link rel="apple-touch-startup-image" href="images/splash_screen_1024x748.png" media="(device-width: 768px) and (orientation: landscape)" />
For the new Retina iPad (if you don't add these, it will use the above with pixel doubling):
<link rel="apple-touch-startup-image"
href="images/splash_screen_1536x2008.png"
media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image"
href="images/splash_screen_2048x1496.png"
media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" />
Previous answers (including the accepted answer) at time of posting this didn't work with my testing.
I think Madhup is referring to native apps written in objective c and compiled with xcode.
The OP is trying to make it work for webapps that are added to the homescreen via safari.
Haven't gotten it to work so far :(
I only got the startup image to work by making a PNG image with dimensions of 748x1024. This was tested on an iPad with firmware 3.2.1.
The best explanation of this issue I could find: https://gist.github.com/472519
Note that it only worked for me once I provided a startup image for iPhone and both landscape/portrait for iPad.
From my testing today, it seems the iPad doesn't support the apple-touch-startup-image. It's quite disappointing that the iPhone does support this in OS 3.1, and the iPad doesn't. Also, when using a webapp in a chromeless browser, the viewport isn't set properly.
I do believe both are bugs or omissions in the iPad OS 3.2. Too bad :(
I did ask for it at the apple forums: https://devforums.apple.com/thread/47178
It's the same as the iphone. Put a png named Default.png in the resource folder.