Si eres diseñador web, el error conocido comoViewpoint Scaling podría haber enfrentado lo que ocurre en los dispositivos Apple, es decir, iPod, iPhone y iPad. A veces, cuando rotamos nuestro dispositivo Apple de orientación vertical a horizontal, el sitio se acerca, mostrándonos una vista que tiene un ancho mayor que el ancho del dispositivo. Esto se debe a que el diseñador ha establecido el ancho de la ventana gráfica al ancho del dispositivo. Para ayudarlo a tener una idea de cómo funciona este error, diseñamos una página de muestra y rotamos nuestro iPad de vertical a horizontal.
Una solución rápida para dicho error nos guía a configurar el‘Maximum-scale = 1’ en la metaetiqueta de la ventana gráfica. Esto soluciona el problema por el momento, pero la página ya no se puede hacer zoom porque arreglamos el ancho máximo similar al ancho del dispositivo.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
Esta solución rápida no es exactamente la solución perfecta. Gracias al arduo trabajo de diseñadores como @mathias, @cheeaun y @jdalton, ahora tenemos un javascript que se puede agregar a la sección <head> para obtener una solución permanente. Con esta solución, la página seguirá siendo ampliable.
<script type="text/javascript">
(function(doc) {
var addEvent = "addEventListener",
type = "gesturestart",
qsa = "querySelectorAll",
scales = [1, 1],
meta = qsa in doc ? doc[qsa]("meta[name=viewport]") : [];
function fix() {
meta.content = "width=device-width,minimum-scale=" + scales[0] + ",maximum-scale=" + scales[1];
doc.removeEventListener(type, fix, true);
}
if ((meta = meta[meta.length - 1]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
}(document));
</script>Estas son las únicas soluciones conocidas que los diseñadores han encontrado hasta ahora. Pero si tiene otro para corregir este error, compártelo con nosotros en los comentarios.
Comentarios