JQuery移动设备扩展

我正在使用JQuery Mobile，我在从浏览器到iPhone的扩展方面遇到了麻烦。

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

是否有一些我应该添加的内容，以便在识别出它是移动设备时缩小规模。

这是我目前的HTML。

            
 
 
 
 
 
Logout 
 
 
 
New 
 
 
Title
 
 
 
 
  
 
 
 
  
 
>
 
Content 
Content 
 
 
 
 
 
  
     

Answer 1

我也遇到了iPhone视口和JQuery-Mobile的问题，我最终得到了以下解决方案。

• 添加一个元标记，将高度和宽度设置为设备高度/设备宽度（您可以通过将最大比例更改为高于1的值来允许用户进行缩放，但在以下示例中禁用缩放，我相信Mobile Safari允许值最多10）：

• 当用户在iPhone上更改方向时，我注意到一些奇怪的行为，重新缩放并添加了空白区域，因此我使用了以下代码：

     //检查navigator.userAgent字符串以检测用户是否正在使用iPhone
     if（navigator.userAgent.match（/ iPhone / i））{

         //如果用户正在使用iPhone，则缓存视口标记
         var $ viewport = $（'head'）。children（'meta [name =“viewport”]'）;

         //将事件处理程序绑定到orientationchange事件的window对象
         $（window）.bind（'orientationchange'，function（）{
             if（window.orientation == 90 || window.orientation == -90 || window.orientation == 270）{

                 //景观
                 $ viewport.attr（'content'，'height = device-width，width = device-height，initial-scale = 1.0，maximum-scale = 1.0'）;
             } else {

                 //肖像
                 $ viewport.attr（'content'，'height = device-height，width = device-width，initial-scale = 1.0，maximum-scale = 1.0'）;
             }

         //触发window对象上的orientationchange事件以初始化此代码（基本上是用户以横向模式打开页面）
         }）触发（ 'orientationchange'）;
     }

事件处理程序中的if / then语句检查用户已更改为哪个方向（90，-90和270都是我在横向上看到的值）和$viewport.attr('content',...只需在视口标记中切换高度和宽度值。

Answer 2

在Jquery Mobile 1.1.0中，上面的答案似乎只适用于纵向方向。 我四处搜索，发现这个版本的元标记，（在我的情况下）在两个方向都有效，不需要任何javascript：

（指定设备宽度，但不指定高度。）

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