Hope this question hasn't been asked before.
I've got the following working
<!-- 640x920 for retina display -->
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="images/iphone4-portrait.jpg" />
i'm aware that the image has to be 640x920 else it will not work
i know that there is no Landscape option for this? or is there?
So...on to my issue, when loading the web app from the home screen in Landscape you can see the page content behind the splash screen (lighter green area in the landscape image below), where the states bar was in portrait
Has anyone out there had this issue, if so how are you getting around it.
Thanks
You can not have a landscape startup image on an iPhone. Landscape images ONLY work on the iPad. Also, you must use the proper size on the iPhone, or it will not display at all.
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.
iPad Landscape – 1024 x 748
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
iPad Portrait – 768 x 1004
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />
iPhone/iPod Touch Portrait – 320 x 480 (standard resolution)
<link rel="apple-touch-startup-image" href="img/splash-screen-320x460.png" />
iPhone/iPod Touch Portrait – 640 x 960 pixels (Retina Display high-resolution)
<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />
If creating a Web App for iPad compatibility it’s recommended that both Landscape and Portrait sizes are used.
Getting these to work is an utter nightmare.
On git hub (https://gist.github.com/472519) it says the retina should be
<link rel="apple-touch-startup-image" media="screen and(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="apple_launch_640x920.png" /> - and everybody says it should be the exact size or it won't work yet everybody says different sizes.
On top of that apps seem to cache (maybe not now in iOS5.1 but I am not sure) so you don't have any way of knowing if you have done it right or not if you didn't get it right first time.
I REALLY REALLY REALLY wish Apple would post up code on its dev info somewhere with the definitive answer to this (including iPad Retina) so we could just treat this as the 10minute job it should be rather than wasting hours and hours and hours messing around...:(
I have found the following works on iPad 2 at least- the iPad2 landscape version is actually portrait with the content rotated, so make the landscape version (748x1024) and then rotate 90 CLOCKWISE and you will be good to go.
<!-- startup image for web apps - iPad - landscape (748x1024)
Note: iPad landscape startup image has to be exactly 748x1024 pixels (portrait, with contents rotated).-->
<link rel="apple-touch-startup-image" href="/apple_launch_748x1024.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<!-- startup image for web apps - iPad - portrait (768x1004) -->
<link rel="apple-touch-startup-image" href="/apple_launch_768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
What to do with the rest though I dont know, I don't have an old iphone or a retina ipad, and this is all so flakey whether any of it works is anyones guess...
There is no landscape launch screen spec for the iPhone. This is because the iPhone does not rotate its home screen when the device is sideways -- users will always be launching from portrait orientation.
If you insist you need this however, you could just have your regular launch screen be sideways, suggesting to the user they need to turn their phone around.
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 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 have a webpage which I have created a media query for a resolution of 480px in width.
The iphone 4 correctly picks up this version but for some reason it overhangs the page its not using the actual resolution of the iphone 4 which is 640px in width its using a width of 320px. (i read somewhere that it does this for backward compatibility with apps developed for iphone 3)
Is there a way using a viewport or a media query to correct this? Or does someone have an example of how to implement an iphone media query, ive tried this with no luck.
Is there a way to stretch the 480px media query to fit the iphone?
This is my current viewport:
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=5.0; minimum-scale=0.5;" />
Media query - this does nothing and ive tried with just -webkit-device-pixel-ratio: 2 only
#media screen and (max-width: 480px) and (-webkit-device-pixel-ratio: 2) {}
This media query in css3 should detect any iphone or ipod
#media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2)
The way I understand it is that retina screens will still act as if they are the normal old screens. you act as if things are still 320px is the width. if you want something to take up the full width of an iphone in portrait then you would use 320px not 640px. Really you should be using percentages and ems though not exact px sizes.
Not sure if this answered anything, but I think you were wanting to know why if you set something to 640px it would hang off the edge and not just take up the width of the retina screen.
I'm having trouble understanding how the mobile resolution works. From what I know, standard website mobile resolution is 320px width. The problem seems to be with iPhone 4, which seems to have 640px width screen resolution, but yet, it displays web in 320px.
What is the solution here? Do I code 2 different resolutions for 320px and 640px screens? How do I force iPhone 4 to display 640px web?
Well basically, as you've noticed, iPhone 4+ resolution is 640px, but the browser only displays 320px of it, for a number of different reasons. Check this other answer for more details on how this is happening:320px resolution for web apps
That also talks about the fact that you can specify the viewport for a website to force it to be seen in 640px on an iphone, but that you shouldn't do that, but just double the resolution on the image you use.
I have found websites with a minimum width of 320px will look good on most high-end mobile devices like the iPhone, Android and Nokia N97.Some of the screen resolutions of most popular devices:
"iPhone 320 x 480"
"iPhone 4 320 x 480 (scaled by a factor of 2)"
"HTC Legend 320 x 480"
Either you can use an adaptive layout, like used on this website (try decrease the width of your browser window to see the site adapt). That design is also discussed in this blog post.
Or you create separate layouts for different resolutions all together using media queries.
Because the number of pixels has doubled from iPhone 3 to iPhone 4, it would have meant every website optimized for the iPhone 3 would then be ... tiny on the display.
Hence, a devicePixelRatio was introduced, to retain the size of the websites (in mm or inches) while doubling the physical pixels, efficiently making double resolution (retina) images and fonts much sharper, but retaining old CSS font and pixel sizes.
The devicePixelRatio is 2:1 on iPhone 4 and 5.
That means an image defined in css with 100100px will actually take up 200x200 physical pixels. So you can still css-style the page with 320px total width; 320 dips - device independent pixels.
Note that the devicePixelRatio also exists on Android, where it ranges from 1.5 up to 3.
More information:
http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html and
http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
<link rel="stylesheet" media="all and (orientation:portrait)" href="/Content/portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="/Content/landscape.css">
This way CSS will load separately for landscape and protrait.
#media (min-width: 500px) and (max-width: 640px){}
#media (min-width: 320px) and (max-width: 400px){}
This is how the resolution will be handled.
The most common mobile screen sizes are 320x240, 480x320, 800x480, 960x480, 1024x800, and 1024x768.
you use this line of code:
<link type="text/css" href="css/mobile.css" rel="stylesheet" media="only screen and (max-width: 480px)" />
When it detects your screen to be less than 480px in width, it will use that css. If not, it will use the normal css you used before
Cannot seem to get the Apple Startup image to appear on our mobile (not native) app.
I have:
Added meta tag -
Tried both 320x480 and 320x460 .png images and nothing
Tried to use an absolute url
looked at logs and image seems to be called just not appearing on iphone (or iPad)
Using Apple naming conventions, like: Default.png, Default#2x.png, etc.
Help!
Doug
You can not have a landscape startup image on an iPhone. Landscape images ONLY work on the iPad. Also, you must use the proper size on the iPhone, or it will not display at all.
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.
iPad Landscape – 1024 x 748
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
iPad Portrait – 768 x 1004
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />
iPhone/iPod Touch Portrait – 320 x 480 (standard resolution)
<link rel="apple-touch-startup-image" href="img/splash-screen-320x460.png" />
iPhone/iPod Touch Portrait – 640 x 960 pixels (Retina Display high-resolution)
<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />
If creating a Web App for iPad compatibility it’s recommended that both Landscape and Portrait sizes are used.