JQuery 移动设备缩放答案

【问题标题】：JQuery Mobile Device ScalingJQuery 移动设备缩放
【发布时间】：2013-05-25 07:29:16
【问题描述】：

我正在使用 JQuery Mobile，但在从浏览器缩放到 iPhone 时遇到问题。

当我在浏览器 (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>

【问题讨论】：

尝试使用元标记：

标签： jquery jquery-mobile

【解决方案1】：

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

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

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

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

//检查 navigator.userAgent 字符串以检测用户是否正在使用 iPhone if (navigator.userAgent.match(/iPhone/i)) { //如果用户使用的是iPhone，缓存视口标签 var $viewport = $('head').children('meta[name="viewport"]'); //为orientationchange事件绑定一个事件处理程序到window对象 $(window).bind('orientationchange', function() { 如果（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'); } 别的 { //肖像 $viewport.attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0'); } //触发window对象上的orientationchange事件来初始化这段代码（基本上是在用户以横向模式打开页面的情况下） }).trigger('orientationchange'); }

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

【讨论】：

这在 jQuer Mobile 1.0 RC2 中对我不起作用。 - 其他人对这个解决方案/版本有一些运气吗？

【解决方案2】：

在 Jquery Mobile 1.1.0 中，上述答案对我来说似乎只适用于纵向。我四处搜索，发现了这个版本的元标记，（在我的例子中）它在两个方向都可以工作，不需要任何 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

【讨论】：