no he hecho ninguna versión iPhone, sin embargo, por lo que tengo esta pregunta,iPhone versión del sitio web, ¿recomienda trabajar en px o en%?
el fin de ser capaz de navegar por el sitio web correctamente -incluso si el usuario enciende su teléfono 90º:
¿Debería establecer mi CSS con's en px o en%?
Si el idioma de programáticamente los dispositivos iOS como el iPhone & iTouch entonces me gustaría utilizar píxeles que se oponen a porcentajes, pero si no tiene como objetivo esos dispositivos y quiere un sitio web móvil de una parada para todos (la mayoría de los teléfonos inteligentes), entonces consideraría usar porcentajes.
puede especificar min-width max-width and min-device-width and max-device-width en sus consultas de medios.
Aquí hay un poco más sobre consultas de medios y las combinaciones que puede hacer;
/* Target iPhone Portrait */
@media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }
/* Target Android Portrait larger than 320px Width */
@media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }
/* Target iPhone Landscape */
@media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }
/* Target Android Landscape */
@media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }
Personalmente me gustaría utilizar%, en lugar de píxeles ...
Usted desea que la página se convierta en 100%, lo que sea la forma en esta gira, y luego cambiar el contenido en torno a consecuencia.
El New York Times usa%, como se puede ver en la página donde está el paisaje, se acerca más al zoom que Portrait.
Puede usar% con una clase css, y el tamaño de los componentes se ajustará automáticamente.
También puede utilizar píxeles con dos clases, una para el retrato, uno de paisaje:
body[orient="portrait"] {
property: value;
}
body[orient="landscape"] {
property: value;
}
es que la orientación o la orientación? –
es orientar, la orientación se utiliza con @media – malinois
raro, que intentó y mostrar: ninguno, y no está haciendo ningún efecto; s –
Si usted está construyendo un sitio web no específica para los iPhones (sub-dominio como iphone.mywebsite.com) Me gustaría sugerir el uso de CSS Consultas de medios según lo sugerido por Xavier. Le permite hacer mucho más que especificar min-width y max-width!
Se puede especificar el tipo de dispositivo (pero muchos dispositivos no son reconocidos como deberían ...) como: screenhandheldprinttv y muchos otros Pero lo más importante también se puede establecer si la ventana del navegador está en portait o landscape , es resolution o aspect-ratio y así sucesivamente ...
En cuanto a% o px definitivamente iría por px, es muy difícil tener algo que funcione como desearía usar%. Porque no necesariamente quiere el mismo tipo de información si su usuario viene con un iPhone o con otro dispositivo. Por ejemplo, podría eliminar todas las imágenes pesadas de su sitio web para los usuarios de iPhone porque probablemente usarán una conexión 3G y, por lo tanto, harán que su sitio sea mucho más rápido de cargar.
Una muy nice example de lo que puede hacer con CSS Consultas de medios ... por desgracia no it0s mi trabajo ... :-(
Sí, estoy apuntando a dispositivos IOS –
parece que el uso de píxeles es el camino a seguir, entonces! – Xavier
para max-device-width se aplicará para el paisaje? y ancho máximo se aplicará para retrato? –