web-dev-qa-db-fra.com

Détecter l'iPhone / iPad uniquement par CSS

J'ai essayé de détecter un iPhone ou un iPad uniquement par feuille de style. J'ai essayé la solution fournie ici en utilisant l'ordinateur de poche @media, uniquement l'écran et (largeur maximale de l'appareil: 480 pixels) {.

Cependant, cela ne semble pas fonctionner. Des idées?

iphonecssipad
36
FLX

Voici comment je gère les appareils iPhone (et similaires) [et non iPad]:

Dans mon fichier CSS:

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

Dans la tête de mon document HTML:

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

iPhone et iPod touch:

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

iPhone 4 et 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" />
29
Olivier Payen

Vous voudrez peut-être essayer la solution de cet article O'Reilly .

La partie importante sont ces requêtes multimédia 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">
14
DarkDust

J'utilise ceux-ci:

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

14
zSprawl

De nombreux appareils avec différentes tailles/ratios/résolutions d'écran sont sortis même au cours des cinq dernières années, y compris de nouveaux types d'iPhone et d'iPad. Il serait très difficile de personnaliser un site Web pour chaque appareil.

Pendant ce temps, les médias recherchent device-width, device-height, et device-aspect-ratio ont été déconseillés. Il est donc possible qu'ils ne fonctionnent plus dans les futures versions du navigateur. (Source: MDN )

TLDR: conception basée sur la largeur du navigateur, pas sur les appareils. Voici une bonne introduction à ce sujet .

3
jkdev