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.
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.
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" />
I was trying to target the iphone 5 with my media queries and the background in landscape does not show up. Since I do not have any special graphics for retina displays i wanted to find out if i can use the same graphic for all with the media querys. How do i target iPhone 5 Landscape orientation?
#media only screen and (max-width: 480px)
and (orientation : landscape)
{
#homepage{
background: url('images/480x320_Horizontal.jpg') no-repeat fixed #00314d;
}
}
Use meta tag to force iPhone to render viewport as device width..
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
And now use media query for setting styles for landscape mode, for iphone which is >320px;
#media screen and (min-width: 321px){
/*Style goes here*/
}
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'm making a mobile-friendly stylesheet for a page of mine. Is there a simple way to make it show that stylesheet to iPhone/Android users? Or do I have to pull the user-agents and figure it out that way - and how do I do that?
Also - any tools to make this sort of web dev easier?
You could do something like this, if your stylesheet is the same for iOS/android.
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" />
But if you're trying to detect if it's the iOS OR Android, then you'll need to do detection.
In terms of making mobile dev easier, there's a ton of stuff:
http://www.phonegap.com/
http://www.sencha.com/products/touch/
http://www.appcelerator.com/
http://www.jquerymobile.com/
http://www.jqtouch.com/
There's a few to get you started :)
Hope this helps.
Try this, using navigator.userAgent in JavaScript ;) (courtesy of this awesome post http://css-tricks.com/snippets/javascript/redirect-mobile-devices/):
if ((navigator.userAgent.match(/iPhone/)) || (navigator.userAgent.match(/iPod/))) {
alert("we've got an iDevice, Scotty");
}
if (navigator.userAgent.match(/Android/)) {
alert("Droid me baby");
}
detect what exactly use user, and style for his mobile device
iphone 4
#media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){
.inphone4CSS{}
}
traget Target Samsung Galaxy S2
#media screen and (device-width: 320px) and (device-height: 534px) and (-webkit-device-pixel-ratio: 1.5){
.GalaxyS2_CSS{}
}
more about it(or another devices) you can find here:
Target a specific device