JQuery Mobile Device Scaling

我正在使用JQuery Mobile，并且在从浏览器扩展到iPhone时遇到问题。JQuery Mobile Device Scaling

当我在浏览器（safari）上加载它时，它缩小并展开得很好。但是，当我将它加载到我的iPhone上时，它不会缩放。它允许您在不应该时左右滚动。

有什么我应该添加，使其缩小，承认它是一个移动设备。

这是我目前的html。

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

来源

2011-06-23 Chris

试着玩元标记： –

我曾与iPhone视窗和JQuery-Mobile的问题，以及，我结束了以下解决方案。

添加元标记，其设定的高度和宽度，以该装置高度/设备宽度（可以允许用户通过改变最大规模的东西上面1然而变焦在以下禁止放大例如，我相信移动Safari允许值最多10个）：

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

当用户改变iPhone上的方向，我注意到有重新缩放一些奇怪的行为，并添加空格等等我使用了以下代码：

 
    //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'); 
    }

的，如果/然后在该方向的用户已更改为事件处理程序检查的语句（90，-90和270是我见过的风景都值）和$viewport.attr('content',...线刚切换视口标签中的高度和宽度值。

来源

2011-06-23 16:11:43 Jasper

+1完美地工作，感谢这篇技巧。 – Fore

这在jQuer Mobile 1.0 RC2中不适用于我。 - 其他人对此解决方案/版本有一些好运吗？ – Smamatti

谢谢。你达曼。 – mousedown

在Jquery Mobile 1.1.0中，上面的答案似乎只适用于我的纵向方向。我搜索了四周，发现这个版本的meta标签，这（对我来说）在两个方向工作的，而不需要任何的javascript：

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

（指定设备的宽度，而不是高度。）

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

来源

2012-06-05 21:35:07

JQuery Mobile Device Scaling

回答

相关问题