Tengo un sitio web que necesita usar el valor 0,3 para la ventana gráfica en el iPhone, pero 0,7 para el ipad.¿Cómo establecer la ventana gráfica solo para iphone o ipad?
¿Hay alguna manera de establecer la ventana gráfica solo para iphone o ipad?
No estoy seguro de que pueda configurar una ventana gráfica solo para iPhone, pero podría establecer la consulta de medios y, por lo tanto, el CSS solo para iPhone, creo.
Al configurar la consulta de medios para solo anchos de dispositivo del iPhone (320x480) o iPad (1024x768), posiblemente pueda lograr lo que está intentando.
¡Encontré una manera simple con jQuery!
Añadir esto a la etiqueta <head>:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script>if ($(window).width() < 600) { $('meta[name=viewport]').attr('content','initial-scale=0.54, maximum-scale=0.54, user-scalable=no'); }</script>
La etiqueta <meta> establece la escala defecto y el <script> etiqueta re-escribe el visor si el ancho de la pantalla del dispositivo es inferior a 600 píxeles (creo que todos los dispositivos de telefonía están debajo de 600px).
no pude encontrar una solución sencilla en cualquier lugar por lo que ocurrió con esta :)
El iPhone inicialmente establece el ancho de la ventana en 960px. – Ross
Esto no funcionó para mí –
Si es necesario establecer diferentes ventana gráfica, en función del dispositivo (iPhone/iPad), es necesario establecer el visor utilizando el dispositivo de ancho
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width=device-width;">lo que la declaración anterior se hacer es establecer una ventana gráfica de 320px en el iPhone y 768px en el iPad..Guess que es lo que se traduce en 0,3 woudld y 0,7 U están buscando.
Esto funcionó pero solo después de ¡Me di cuenta de que esta línea no entra en la sección ...! Tonto de mi parte, pero tal vez sea necesario decirlo.
Gracias!
Tenga en cuenta que meta viewport es una lista delimitada por comas, no debe usar punto y coma.
<meta name = "viewport" content = "width = 320,
initial-scale = 2.3, user-scalable = no">
Fuente: viewport syntax in Apple's documentation y Configuring the Viewport – Apple article
(Si tuviera más puntos de reputación, me gustaría añadir esto como un comentario)
Aquí es una solución ...
<!-- in head -->
<meta id="viewport" name='viewport'>
<script>
(function(doc) {
var viewport = document.getElementById('viewport');
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
viewport.setAttribute("content", "initial-scale=0.3");
} else if (navigator.userAgent.match(/iPad/i)) {
viewport.setAttribute("content", "initial-scale=0.7");
}
}(document));
</script>
Veo que está utilizando un IIFE, ¿podría eliminarse el envoltorio de expresión de funciones y el efecto sería el mismo? ¿Cuál es el beneficio del formato IIFE en este caso? – DyeA
El IIFE es para administrar el alcance, por lo que las variables declaradas dentro del IIFE no contaminan el alcance global (como 'viewport') – bioball
más uno para una solución que no es jQuery, aunque estoy usando jQuery. Quiero asegurarme de que esto se ejecute lo más pronto posible. – atw13
Consulte mi respuesta a continuación sobre cómo configurar dinámicamente su iniciación Haga zoom para que todo su sitio se amplíe correctamente al cargar la página (funciona para todos los tamaños de dispositivo).
Change tablet viewport to exactly show fixed dimension element
Para todos los dispositivos móviles, intentar algo como esto.
<meta name="viewport" content="width=1024">
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
if (/iphone|ipod|android|blackberry|opera mini|opera mobi|skyfire|maemo|windows phone|palm|iemobile|symbian|symbianos|fennec/i.test(navigator.userAgent.toLowerCase())) {
$("meta[name='viewport']").attr("content", "width=640");
}
</script>
Ese script de Tim que usa jquery parece funcionar bien. Lo cambié un poco y parece funcionar para mí. Agregué algunos parámetros de escala. Me dio los resultados que necesitaba para que mi página se mostrara bien tanto en iphone como en ipad. Esto es lo que añadí:
maximum-scale=2.0; user-scalable=1;
Si no está satisfecho con las respuestas que recibió, por favor, comentar sobre ellos que la gente puede tratar de mejorarlas. Si es así, acepte uno de ellos. –
@fichek en este caso, ninguna respuesta aquí responde la pregunta del OP. Esto incluye tu propia respuesta. Antes de pedirle al OP que responda, vuelva a leer la pregunta:) – Ross