JQuery Mobile Device Scaling

Estoy usando JQuery Mobile y estoy teniendo problemas con la escala desde mi navegador a mi iPhone.JQuery Mobile Device Scaling

Cuando lo cargo en un navegador (safari) se encoge y se expande muy bien. Sin embargo, cuando lo cargo en mi iPhone, no escala. Te permite desplazarte hacia la izquierda y hacia la derecha cuando no debería.

¿Hay algo que se supone que debo agregar para que sea escalable reconocer que es un dispositivo móvil?

Aquí está mi html actual.

<head> 
     <title>Page Title</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://www.domain.com/css/jquery.mobile-1.0b1.min.css" /> 
     <link rel="stylesheet" href="http://www.domain.com/css/base.css" /> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"> 

     </script> 
     <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> 
    </head> 

    <body> 

     <body> 
      <!-- Start of first page --> 
      <div data-role="page"> 
       <div data-role="header"> 
        <div id="header"> 
         <ul> 
          <li> 
           <div><a href="logout.php">Logout</a> 
           </div> 
          </li> 
          <li style="float:right;"> 
           <div><a href="new.php">New</a> 
           </div> 
          </li> 
          <h1 align="center">Title</h1> 

         </ul> 
         <div id="clear"></div> 
        </div> 
       </div> 
       <!-- /header --> 
       <div id="stream"> 
        <div id="stream_story"> 
         <ul style="width:100%"> 
          <li> 
           <img src="" /> 
          </li> 
          <li style="float:right;">></li> 
          <li style="width:75%;margin-bottom:10px;margin-left:5px;">Content 
           <br/><span>Content</span> 
          </li> 
         </ul> 
        </div> 
        <div id="clear"></div> 
        <hr/> 
       </div> 
       <!-- /content --> 
      </div> 
      <!-- /page --> 
     </body> 
    </body> 

</html>

Fuente

2011-06-23 Chris

intente jugar con la meta etiqueta: –

he tenido problemas con el visor iPhone y jQuery-Mobile, así, que terminó con la siguiente solución.

Añadir una etiqueta meta que fija la altura y la anchura de la/dispositivo de ancho dispositivo de altura (se puede permitir al usuario hacer zoom cambiando la máxima escala a algo por encima de 1, sin embargo zoom se desactiva en el siguiente ejemplo, creo Mobile Safari permite un valor de hasta 10):

<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0" >

a medida que el usuario cambia la orientación en el iPhone me di cuenta de algunos comportamientos extraños con re-escalado y ha añadido un espacio en blanco de modo Utilicé el siguiente código:

 
    //check the navigator.userAgent string to detect if the user is using an iPhone 
    if (navigator.userAgent.match(/iPhone/i)) { 

     //cache the viewport tag if the user is using an iPhone 
     var $viewport = $('head').children('meta[name="viewport"]'); 

     //bind an event handler to the window object for the orientationchange event 
     $(window).bind('orientationchange', function() { 
      if (window.orientation == 90 || window.orientation == -90 || window.orientation == 270) { 

       //landscape 
       $viewport.attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0'); 
      } else { 

       //portrait 
       $viewport.attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0'); 
      } 

     //trigger an orientationchange event on the window object to initialize this code (basically in-case the user opens the page in landscape mode) 
     }).trigger('orientationchange'); 
    }

El if/then declaración en los controles de controlador de eventos para los que la orientación del usuario ha cambiado a (90, -90, y 270 son todos los valores que he visto para el paisaje) y las líneas simplemente $viewport.attr('content',... cambie los valores de alto y ancho en la etiqueta de la vista.

Fuente

2011-06-23 16:11:43 Jasper

+1 Funciona perfectamente, gracias por este consejo. – Fore

Esto no funciona para mí en jQuer Mobile 1.0 RC2. - ¿Alguien más tuvo algo de suerte con esta solución/versión? – Smamatti

Gracias. Eres el hombre. – mousedown

En Jquery Mobile 1.1.0, la respuesta anterior solo parece funcionar en orientación vertical para mí. Busqué y encontré esta versión de la etiqueta meta, que (en mi caso) trabajó en ambas orientaciones, sin necesidad de ningún javascript:

<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">

(la anchura del dispositivo Especifica, pero no la altura.)

Fuente: http://www.wintellect.com/cs/blogs/rrobinson/archive/2011/07/25/how-to-scale-a-jquery-mobile-site-for-ios.aspx

Fuente

2012-06-05 21:35:07

Respuesta

Cuestiones relacionadas