Establecimiento de una vista adecuada, compatible con ios & android, que funciona con la rotación
Tengo una pregunta, que he visto diferentes partes de ser preguntado, pero todavía tengo que encontrar una respuesta de trabajo concisa que funciona correctamente en iOS y android (estoy específicamente probando ahora con iPad, iPad2, teléfonos Android y iPod Touch) . Así que lo que tengo es un sitio escalable que funciona muy bien. Quiero ser capaz de especificar que el ancho mínimo del sitio es 480px, el ancho máximo es 1014px, y cualquier cosa entre ellos se dejará como está. Aquí está mi código actual:
ViewportWidth se calcula por window.screen.width minwidth es una variable (480) maxwidth es una variable (1014)
- Configuración del visor para escalar para ajustar tanto el ancho como la altura
- WebView en Android 4.4 y escala inicial
- El navegador de Android se bloquea en las llamadas de Ajax, cuando se define la metaetiqueta de la ventana de visualización
- Altura: 100% en <body> no funciona en la aplicación web android?
- Configuración del ancho de la ventana de visualización cuando el contenedor es más pequeño que el ancho del dispositivo
El siguiente código se llama en los eventos de rotación del dispositivo que se está disparando.
Nota: He dejado parte de mi código comentado en la fuente de abajo para mostrar lo que he probado
Cualquier ayuda es muy apreciada, mi código funciona, pero me parece que en los dispositivos más pequeños tengo que alejar un smidge, ya que la página está fuera de la ventana de visualización (aunque no debería ser). Girando algunas veces en ocasiones arregla esto …
/*Set initial Sizes*/ if( viewportWidth > maxWidth){ //dont adjust since it may be desktop viewportWidth = maxWidth; $('meta[name="viewport"]').attr('content', 'initial-scale=1.0; width=device-width' ); //viewport = document.querySelector("meta[name=viewport]"); //viewport.setAttribute('content', 'width=' + maxWidth + '; initial-scale=1.0; user-scalable=1;'); }else if( viewportWidth > minWidth && viewportWidth < maxWidth ){ $('body').removeClass('mobile'); $('body').addClass('desktop'); $('meta[name="viewport"]').attr('content', 'initial-scale=1.0; width=device-width' ); //viewport = document.querySelector("meta[name=viewport]"); //viewport.setAttribute('content', 'width=' + window.screen.width + '; initial-scale=1.0; user-scalable=1;'); isMobile = 0; }else if( viewportWidth <= minWidth ){ if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) { $('meta[name="viewport"]').attr('content', 'initial-scale =' + (window.screen.width / minWidth ).toFixed(2) ); }else{ $('meta[name="viewport"]').attr('content', 'initial-scale = ' + (window.screen.width / minWidth ).toFixed(2) + '; width=device-width'); } //viewport = document.querySelector("meta[name=viewport]"); //viewport.setAttribute('content', 'initial-scale = ' + (window.screen.width / minWidth ).toFixed(2) + '; width=' + minWidth + '; initial-scale=1.0; user-scalable=1;'); $('body').removeClass('desktop'); $('body').addClass('mobile'); //$('#pageBody').width(minWidth ); viewportWidth = minWidth ; isMobile = 1; } - Problema con meta viewport y Android
- La especificación de visor Pinch / Zoom funciona en el iPhone pero no en Android
- Escalado de la vista de Android 4.1 (setInitialScale, meta-escala inicial no funciona)
- Problema de escalado de página en dispositivos Android
- Firefox móvil ignora completamente Viewport
- Libgdx | ¿Cómo crear minimap?
- La metaetiqueta del visor no funciona
- Hacer que la vista web de una tableta simule un pequeño dispositivo
Nadie respondió, así que esto es algo que funciona
1, Utilice las consultas de medios para el css 2, Utilice esta secuencia de comandos para fijar el zoom
<meta id="Viewport" name="viewport" width="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <script type="text/javascript"> $(function(){ if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width var mw = 480; // min width of site var ratio = ww / mw; //calculate ratio if( ww < mw){ //smaller than minimum size $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww); }else{ //regular size $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww); } } }); </script>