Detecta iPhone / iPad puramente por css

He intentado detectar un iPhone o iPad simplemente por una hoja de estilo. Probé la solución provista aquí usando @media handheld, only screen y (max-device-width: 480px) {.

Sin embargo, esto no parece funcionar. ¿Algunas ideas?

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:

  

iPhone y iPod touch:

  

iPhone 4 y iPod touch 4G:

  

iPad:

  

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:

     

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/

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 .