Consulta de medios CSS en iPhone

Estoy tratando de usar una consulta de medios CSS, específicamente dirigida al iPhone.Consulta de medios CSS en iPhone

Funciona cuando se utiliza un enlace rel normal:

<link rel="stylesheet" type="text/css" href="css/mobile.css" />

Sin embargo, cuando intento esta consulta los medios de comunicación no funciona:

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

¿Cómo puedo utilizar una consulta de medios CSS para apuntar al iPhone?

Fuente

2011-05-31 Ryan

Probar:

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

La diferencia es max-device-width en lugar de sólo max-width. También vea 2) en http://blogs.sitepoint.com/iphone-development-12-tips/.

Fuente

2011-05-31 18:34:04 bensnider

De acuerdo con @bensnider. Si tiene un iPhone para probar, conéctelo en este enlace: http://www.jensbits.com/demos/mq/ Le permite probar diferentes configuraciones de consulta de medios. –

Impresionante - gracias @bensnider – Ryan

max-device-width funciona bien (max-width no -> iOS 5, xCode 4.2). Uso WebView para mostrar texto formateado (sobre la página, también usado para Android y la aplicación de Chrome) en iPhone/iPad. A través de style/css controlo el tamaño de letra y otros. –

Sé que esto no es exacly lo que pidieron, pero yo acabamos contestado algo similar y puede ayudar a:

<meta name='viewport' content='width=device-width; initial-scale=1.0;' />

Hay un montón de parámetros para el contenido, algunos de ellos son:

maximum-scale=3.0; //Maximum zoom allowed 0 to 10.0. default is 1.6 
minimum-scale=0.5; //Minimum zoom allowed 0 to 10.0. default is 0.25 
user-scalable=1; //YES/NO 
width=device-width; //default if not set is 980px 
initial-scale=1.0; //Initial zoom. 0 to 10.0. 1.0 would be 100% 
height=device-height;

Content in UIWebView on iOS 3.1.3 appears zoomed on but on iOS 4.3 appears fine

Editar: También puede usar estos parámetros en Safari, olvídese de lo que ocurre en la página web solo para aplicaciones nativas.

Fuente

2011-05-31 18:15:25

Esos parámetros son geniales, sin embargo, no responde mi pregunta. No puedo hacer que este objetivo el iPhone. – Ryan

solo en caso de que alguien vaya a copiar lo anterior ... la línea correcta es: –

@ good4m ¿Qué pasa con un solo APOSTROPHE? –

Respuesta

Cuestiones relacionadas