Адаптировать код javascript apple-touch-startup-image для iphone5?

Я делаю веб-страницу, которая использует функцию загрузочного изображения для устройств iOS. Для этой задачи я использую код, размещенный в нижнем колонтитуле, который определяет с помощью javascript, какое устройство iOS, а затем загружает для него загрузочное изображение. Таким образом, сайт значительно экономит трафик, поскольку загружает только одно изображение вместо четырех.

Но с новым размером экрана iPhone 5 мой код нуждается в некоторых изменениях, но я не могу понять, как это сделать.

Это код:

<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>

Как видите, эта работа предназначена для iPad/iPhone с переменными для ориентации устройства и соотношения пикселей устройства. Но проблема в том, что для iPhone с дисплеем Retina нет переменной для определения i5 или i4/4S, поэтому он просто загружает изображение для iPhone 960x640.

Вы знаете, как включить переменную для размера экрана устройства?


iphone web-applications iphone-5
person Sydney Beau    schedule 30.06.2013    source источник
comment
взгляните на stackoverflow.com/a/12471432/1328096, может это вам поможет.   -  person jamil    schedule 30.06.2013

Ответы (1)


arrow_upward
0
arrow_downward

Лучший способ сделать это — использовать медиатаргетинг, а не JavaScript.

Если все сделано правильно, iPhone всегда будет извлекать изображение, соответствующее размеру экрана и соотношению пикселей, поэтому нет необходимости прибегать к JavaScript.

Медиа-таргетинг

Это работает для iPhone;

<!-- 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">

И для iPad;

<!-- 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">

Дополнительную информацию об этих загрузочных изображениях можно найти по адресу Stuff & Nonsense. .

Это приведет к тому, что устройство загрузит только соответствующее ему изображение.

Измерение высоты устройства в JavaScript

Если вы должны использовать JavaScript по какой-либо причине (а я не советую этого делать), вы можете получить высоту устройства с помощью window.screen.height. На 3,5-дюймовых устройствах это будет 480, а на 4-дюймовых — 568.

Дополнительную информацию об измерении области просмотра в JS см. в руководстве по ResponseJS.

person ticky    schedule 06.09.2013