Определить iPhone/iPad чисто по CSS

Question

Я пытался определить iPhone или iPad только по таблице стилей. Я попробовал решение, представленное здесь, используя @media handheld, only screen и (max-device-width: 480px) {.

Тем не менее, это не похоже на работу. Есть идеи?

Answer 1

Вот как я работаю с iPhone (и аналогичными) устройствами [не iPad]:

В моем файле CSS:

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
   /* CSS overrides for mobile here */
}

В заголовке моего HTML-документа:

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

Answer 2

iPhone и iPod touch:

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />

iPhone 4 и iPod touch 4G:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />

IPAD:

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

Answer 3

Я использую это:

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}

/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {
} 

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
}

/* iPad Landscape */
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
}

http://zsprawl.com/iOS/2012/03/css-for-iphone-ipad-and-retina-displays/

Answer 4

Возможно, вы захотите попробовать решение из этой статьи O'Reilly.

Важной частью являются медиа-запросы CSS:

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css"> 
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css"> 

Answer 5

Многие устройства с различными размерами экрана / отношениями / разрешениями появились даже за последние пять лет, включая новые типы iPhone и iPad. Было бы очень сложно настроить веб-сайт для каждого устройства.

Тем временем, медиа-запросы для device-width, device-height, а также device-aspect-ratio устарели, поэтому они могут не работать в будущих версиях браузера. (Источник: MDN)

TLDR: дизайн основан на ширине браузера, а не на устройствах. Вот хорошее введение в эту тему.