queries - Detecta iPhone/iPad puramente por css
media query ipad pro (5)
Así es como manejo dispositivos iPhone (y similares) [no iPad]:
En mi archivo CSS:
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
/* CSS overrides for mobile here */
}
En el encabezado de mi documento HTML:
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
He intentado detectar un iPhone o iPad simplemente por una hoja de estilo. Probé la solución provista here usando @media handheld, only screen y (max-device-width: 480px) {.
Sin embargo, esto no parece funcionar. ¿Algunas ideas?
Es posible que desee probar la solución de este artículo de O''Reilly .
La parte importante son estas consultas de medios de 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">
Muchos dispositivos con diferentes tamaños de pantalla / razones / resoluciones han aparecido incluso en los últimos cinco años, incluidos los nuevos tipos de iPhones y iPads. Sería muy difícil personalizar un sitio web para cada dispositivo.
Mientras tanto, las consultas de medios para device-width
device-height
device-aspect-ratio
han quedado obsoletas, por lo que es posible que no funcionen en futuras versiones de navegador. (Fuente: MDN )
TLDR: diseño basado en anchos de navegador, no en dispositivos. Aquí hay una buena introducción a este tema .
Yo uso estos:
/* 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/
iPhone y iPod touch:
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />
iPhone 4 y 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" />