2012-08-13 17 views
14

Pregunta

Sé que hay un montón de preguntas sobre desbordamiento de pila sobre la etiqueta de visualización del meta, pero no puedo encontrar a alguien que pide lo que parece ser la más obvia y útil pregunta:¿Cómo puedo usar meta viewport y consultas de medios CSS para hacer que el sitio web promedio de 960px se vea bien en el iPhone y el iPad?

¿Cómo puede Uso meta viewport y consultas de medios CSS para hacer que el diseño del sitio web promedio de 960px se vea bien en el iPad (y en el escritorio), al mismo tiempo que conserva una ventana gráfica y un diseño de sitio más pequeños (por ejemplo, 320px) para el iPhone y otros teléfonos celulares.

Para el iPhone, creo que es evidente: un sitio más pequeño y fácil de usar (por ejemplo, 320 píxeles de ancho) es ideal. Pero para la pantalla más grande del iPad, un sitio móvil especial no es realmente necesario; usar el diseño de sitio normal de 960px parece apropiado. Un sitio de 320px parece clownish en el iPad, y no siempre quiero diseñar una tercera variación para el iPad de 768px.

Aquí está el problema: no puedo entender cómo usar la etiqueta meta viewport y las consultas de medios CSS para lograr tanto 1) un sitio normal en el iPad, y 2) un sitio móvil en el iPhone. Me doy cuenta de que es posible con los hacks de JavaScript (por ejemplo, cambiando dinámicamente la etiqueta de la metapantalla según el dispositivo), pero no quiero usar JavaScript; No creo que deba exigirse a JS que logre la usabilidad básica en un sitio web simple con contenido estático.

1) Si quito la etiqueta de visualización meta por completo, mi normal de 960 sitio se ve perfecta en el IPAD, pero mal en el iPhone (amplio margen vacío en el lado derecho):

Website example without meta viewport tag

2) por otro lado, si uso <meta name="viewport" content="width=device-width" />, entonces el sitio se ve muy bien en el iPhone, pero mal en el iPAD (ampliada a 768px, sitio derrama fuera de la vista):

Website example with meta viewport tag

Parece que debería ser lo más simple del mundo, pero no he podido resolverlo. ¿Qué me estoy perdiendo?

de marcado/CSS

CSS:

<style type="text/css"> 
body { margin: 0; } 
.mobile { width: 320px; background: #fdd; display: none; } 
.desktop { width: 960px; background: #ddf; } 
</style> 

<style type="text/css" media="screen and (max-device-width: 480px)"> 
.mobile { display: block; } 
.desktop { display: none; } 
</style> 

de marcado:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width" /> 
</head> 
<body> 
<div class="mobile">Phone (320px)</div> 
<div class="desktop">Desktop and tablet (960px)</div> 
</body> 
</html> 

Respuesta

10

combinar una consulta de medios con zoom.

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) { 
    html {zoom:0.8;} 
} 
+3

Tenga cuidado al utilizar el zoom. Es una extensión no validación, específica de Microsoft para CSS. Firefox no parece admitirlo en este momento (aunque eso puede no importar para los sitios web móviles). –

+0

Esto no tiene el resultado deseado, aplasta el contenido. – Shaun

+0

@Shaun Funcionó bien para mí. –

4

Trate de añadir-máximo de la escala a su etiqueta meta:

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

Usted podría utilizar JS para arrancar las etiquetas de ventana gráfica meta como Cole discute aquí - http://cole007.net/blog/136/responsiveish-viewport-hack también hay otra opción en los comentarios

+0

Esta es la solución más limpia en mi opinión. Sería aún mejor si esta respuesta contuviera un resumen. – JoostS

0

yo uso php método de detección móvil de Serban Ghita:

https://github.com/serbanghita/Mobile-Detect

... entonces este php en la etiqueta de la cabeza:

<?php 
if ($detect->isMobile() && !$detect->isTablet()) {?> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, max-scale = 1.0"> 
<?php } ?> 

funciona muy bien.

+0

Esto puede ser efectivo pero teóricamente es bastante horrible hacer tales cosas en el lado del servidor. Los usuarios deberían poder guardar documentos web y verlos en diferentes dispositivos y seguir funcionando como se esperaba. No es que alguien alguna vez realmente hiciera tal cosa, pero ... ya sabes ... Teóricamente. –

Cuestiones relacionadas