iPhone 6 и 6 Plus медиазапросы
кто-нибудь знает конкретные размеры экрана для целевых медиа-запросов для iPhone 6 и 6 Plus?
кроме того, размеры значков и заставки?
7 ответов
iPhone 6
-
пейзаж
@media only screen and (min-device-width : 375px) // or 213.4375em or 3in or 9cm and (max-device-width : 667px) // or 41.6875em and (width : 667px) // or 41.6875em and (height : 375px) // or 23.4375em and (orientation : landscape) and (color : 8) and (device-aspect-ratio : 375/667) and (aspect-ratio : 667/375) and (device-pixel-ratio : 2) and (-webkit-min-device-pixel-ratio : 2) { }
-
портрет
@media only screen and (min-device-width : 375px) // or 213.4375em and (max-device-width : 667px) // or 41.6875em and (width : 375px) // or 23.4375em and (height : 559px) // or 34.9375em and (orientation : portrait) and (color : 8) and (device-aspect-ratio : 375/667) and (aspect-ratio : 375/559) and (device-pixel-ratio : 2) and (-webkit-min-device-pixel-ratio : 2) { }
если вы предпочитаете, вы можете использовать
(device-width : 375px)
и(device-height: 559px)
вместоmin-
иmax-
настройки.нет необходимости использовать все эти настройки, и это не все возможные настройки. Это только большинство возможных вариантов, поэтому вы можете выбрать и выбрать те, которые соответствуют вашим по необходимости.
-
Пользовательский Агент
протестировано с моим iPhone 6 (модель MG6G2LL / A) с iOS 9.0 (13A4305g)
# Safari Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.39 (KHTML, like Gecko) Version/9.0 Mobile/13A4305g Safari 601.1 # Google Chrome Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.53.11 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10 (000102) # Mercury Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11B554a Safari/9537.53
-
запуск изображения
- 750 x 1334 (@2x) для портрета
- 1334 x 750 (@2x) для ландшафта
-
значок приложения
- 120 x 120
для iPhone 6+
-
пейзаж
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 3) { }
-
портрет
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (device-width : 414px) and (device-height : 736px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 3) and (-webkit-device-pixel-ratio : 3) { }
-
запуск изображения
- 1242 x 2208 (@3x) для портрета
- 2208 x 1242 (@3x) для ландшафта
-
значок приложения
- 180 x 180
iPhone 6 и 6+
@media only screen
and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px)
{ }
предсказал
по данным веб-сайт Apple iPhone 6 Plus будет иметь 401 пиксель на дюйм и будет 1920 x 1080. Меньшая версия iPhone 6 будет 1334 x 750 с 326 PPI.
Итак, предполагая, что информация верна, мы можем написать медиа-запрос для iPhone 6:
@media screen
and (min-device-width : 1080px)
and (max-device-width : 1920px)
and (min-resolution: 401dpi)
and (device-aspect-ratio:16/9)
{ }
@media screen
and (min-device-width : 750px)
and (max-device-width : 1334px)
and (min-resolution: 326dpi)
{ }
отметим, что устройство-соотношение сторон будет прекращена в http://dev.w3.org/csswg/mediaqueries-4/ и заменено на аспект-соотношение
Min-width и max-width могут быть чем-то вроде 1704 x 960.
Apple Watch (спекулятивный)
спецификации на часах все еще немного спекулятивны, так как (насколько мне известно) еще не было официального листа спецификаций. Но Apple упомянул в пресс-релизе, что часы будут доступны в двух размерах.. 38мм и 42мм.
далее, принимая.. эти размеры относятся к размеру экрана, а не к общему размеру циферблата эти медиа-запросы должны работать.. И я уверен, что вы можете дать или взять несколько миллиметров, чтобы покрыть любой сценарий, не жертвуя нежелательной целью, потому что..
@media (!small) and (damn-small), (omfg) { }
или
@media
(max-device-width:42mm)
and (min-device-width:38mm)
{ }
стоит отметить, что Медиа-Запросы Уровень 4 из W3C в настоящее время доступен только в качестве первого публичного проекта, как только он будет доступен для использования принесет с собой много новых функций, разработанных с небольших носимых устройств, как это в виду.
это работает для меня прямо сейчас:
iPhone 6
@media only screen and (max-device-width: 667px)
and (-webkit-device-pixel-ratio: 2) {
iPhone 6+
@media screen and (min-device-width : 414px)
and (-webkit-device-pixel-ratio: 3)
это работает для меня для iphone 6
/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
}
/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
}
/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
}
/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {
}
/*iPhone 6 and iPhone 6+ portrait and landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){
}
/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){
}
/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){
}
просто, чтобы вы знали, что iPhone 6 лежит о его минимальной ширине. Он думает, что это 320 вместо 375, как предполагается.
@media only screen and (max-device-width: 667px)
and (-webkit-device-pixel-ratio: 2) {
}
Это было единственное, что я мог получить, чтобы работать, чтобы нацелить iPhone 6. 6+ отлично работает с использованием этого метода:
@media screen and (min-device-width : 414px)
and (max-device-height : 736px) and (max-resolution: 401dpi)
{
}
вы должны целевой размер экрана с помощью медиа-запроса для различного размера экрана.
на iphone:
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2)
{ }
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{ }
и рабочий стол версия:
@media only screen (max-width: 1080){
}
iPhone X
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
/* uncomment for only portrait: */
/* and (orientation: portrait) */
/* uncomment for only landscape: */
/* and (orientation: landscape) */ {
}
iPhone 6+, 7+ и 8+
/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
/* uncomment for only portrait: */
/* and (orientation: portrait) */
/* uncomment for only landscape: */
/* and (orientation: landscape) */ {
}
iPhone 6, 6S, 7 и 8
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
/* uncomment for only portrait: */
/* and (orientation: portrait) */
/* uncomment for only landscape: */
/* and (orientation: landscape) */ {
}
источник: медиа-запросы для стандартных устройств
для iPhone 5,
@media screen and (device-aspect-ratio: 40/71)
для iPhone 6,7,8
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait)
для iPhone 6+,7+,8+
@media screen and (-webkit-device-pixel-ratio: 3) and (min-device-width: 414px)
отлично работает для меня на данный момент.