Правильный размер изображения Apple-Touch-Startup-Image в iPhone 6, iPhone 6 Plus?

Хочу проверить, верны ли мои математические и медиа-запросы, так как я нигде не могу найти эту информацию.

<!-- iOS 8 iPhone 6 (portrait) -->
<link rel="apple-touch-startup-image" href="/apple-touch-startup-image-750×1294.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- iOS 8 iPhone 6 (landscape) -->
<link rel="apple-touch-startup-image" href="/apple-touch-startup-image-710x1334.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- iOS 8 iPhone 6 Plus (portrait) -->
<link rel="apple-touch-startup-image" href="/apple-touch-startup-image-1242×2148.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)">
<!-- iOS 8 iPhone 6 Plus (landscape) -->
<link rel="apple-touch-startup-image" href="/apple-touch-startup-image-1182x2208.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)">

html media-queries iphone-6 iphone-6-plus
person Ken Edwards    schedule 24.09.2014    source источник
comment
Хорошо? Итак, в чем вопрос, какие проблемы у вас (потенциально) возникают с вашими математическими и медиа-запросами?   -  person David says reinstate Monica    schedule 25.09.2014
comment
LOL, хорошо, я думаю, я мог бы быть более ясным. Размеры для 4 строк кода, 750х1294, 710х1334, 1242х2148, 1182х2208. Это правильно?   -  person Ken Edwards    schedule 25.09.2014
comment
Почему размеры портретной и альбомной ориентации для каждого устройства будут разными (кроме очевидного переключения ширины и высоты)?   -  person rmaddy    schedule 25.09.2014
comment
Вам нужно вычесть 20 пикселей или 40 пикселей (или 60 пикселей для iPhone 6 Plus) для строки состояния.   -  person Ken Edwards    schedule 27.09.2014

Ответы (3)


arrow_upward
9
arrow_downward

Редактировать: я удалил неверную информацию из своего поста, то, что вы разместили, верно, за исключением ландшафтного режима iPhone 6, и поменяйте местами ширину / высоту для ландшафтного режима iPhone 6+.

<!-- iPhone 6 -->
<link href="750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPhone 6+ Portrait -->
<link href="1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">

<!-- iPhone 6+ Landscape -->
<link href="2208x1182.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">

Ранее я допустил ошибку, используя такие же размеры загрузочного изображения, как и устройство, и они просто не отображаются, необходимо использовать правильные размеры изображений.

person Adam Smith    schedule 26.09.2014
comment
Та самая ссылка на mobilexweb.com, которую вы получили (которая это отличное чтение, я уже прошел через это) также указывает ширину устройства 375 пикселей и 414 пикселей. Что соответствует медиа-атрибутам apple-touch-startup-image, которые у меня уже есть для iPad и старых iPhone. - person Ken Edwards; 27.09.2014
comment
Я только что узнал, что iPhone 6 Plus поддерживает только альбомную ориентацию. Таким образом, устраняется одна строка кода. Все еще нужно протестировать Plus, прежде чем опубликовать завершенный фрагмент кода. - person Ken Edwards; 28.09.2014
comment
Ах да, вы абсолютно правы насчет пикселей, на данный момент так много противоречивой информации, но это, кажется, наиболее полная. Поддерживает ли iPhone 6+ только альбомную ориентацию (не портретную) или это единственное устройство, поддерживающее портретную и альбомную ориентацию? - person Adam Smith; 29.09.2014
comment
iPhone 6+ имеет портретную и альбомную ориентацию. У iPhone 6 нет горизонтальной ориентации домашнего экрана, что вполне логично. - person Ken Edwards; 05.10.2014
comment
@KenEdwards, почему в iPhone 6 нет ландшафтного режима? В iPhone 5S он был. Просто интересно, в чем причина. - person Andres SK; 23.11.2014

arrow_upward
0
arrow_downward

У меня недостаточно репутации, чтобы комментировать, поэтому вот мой предложенный ответ, основанный на превосходном ответе Адама Смита:

<!-- iPhone 6 -->
<link href="750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPhone 6+ Portrait -->
<link href="1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">

<!-- iPhone 6+ Landscape -->
<link href="1182x2208r.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">

Обратите внимание, что альбомное изображение 6+ должно быть повернуто вправо на 90 и иметь размер 1182x2208. Это согласуется с загрузочными изображениями в альбомной ориентации для iPad. Если вы разработчик веб-приложений и у вас iPhone 6+, проверьте этот ответ и прокомментируйте. Спасибо!

person Joe Orost    schedule 31.10.2014
comment
1182 x 2208 с поворотом на 90° составляет 2208 x 1182. Альбомное изображение должно быть сохранено в ландшафтном режиме, оно должно быть 2208 по ширине и 1182 по высоте. - person Adam Smith; 31.10.2014
comment
@AdamSmith, по крайней мере, для iPhone 5, изображения запуска должны быть всегда в вертикальном положении. - person Andres SK; 23.11.2014
comment
Если кто-то, у кого есть iPhone 6+, может проверить, какой правильный ответ, это было бы очень здорово! - person Joe Orost; 25.11.2014

arrow_upward
0
arrow_downward

В моем случае размеры должны немного отличаться, как описано в https://dev.to/oskarlarsson/designing-native-like-progressive-web-apps-for-ios-510o Мне нужно было определить следующую ссылку для iPhone 6s:

<link href="/apple-launch-750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

Только после этого на iPhone 6s появляется заставка.

person jmarceli    schedule 30.03.2021