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)

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; } 

One Solution collect form web for “Establecimiento de una vista adecuada, compatible con ios & android, que funciona con la rotación”

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> 
  • Problema con meta viewport y Android
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.