logo标签列表

jQuery Mobile 设备缩放

jqueryjquery-mobile
17

我正在使用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>
尝试使用元标记进行调整：<meta name="viewport" content="width=device-width, initial-scale=1"> - Phill Pafford
2个回答
34
我也遇到了iPhone视口和JQuery-Mobile的问题，最终采用了以下解决方案。
- 添加一个设置高度和宽度为设备高度/设备宽度的meta标签（你可以通过将maximum-scale更改为1以上的值允许用户缩放，但在下面的示例中禁用了缩放。我相信Mobile Safari允许最大10）:
```html ```
- 当用户在iPhone上更改方向时，我注意到一些奇怪的重新缩放和添加空白的行为，因此我使用了以下代码:
```javascript // 检测navigator.userAgent字符串以检测用户是否正在使用iPhone if (navigator.userAgent.match(/iPhone/i)) {
// 缓存viewport标记如果用户正在使用iPhone var $viewport = $('head').children('meta[name="viewport"]');
// 为orientationchange事件绑定窗口对象的事件处理程序 $(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'); }
// 在窗口对象上触发orientationchange事件以初始化此代码（基本上是为了防止用户在横向模式下打开页面） }).trigger('orientationchange'); } ```
- 事件处理程序中的if/then语句检查用户更改到的方向（90、-90和270都是我看到的横向值），而`$viewport.attr('content', ...)`行仅切换视口标记中的高度和宽度值。
1
这在jQuer Mobile 1.0 RC2中对我不起作用。-其他人使用这个解决方案/版本有什么好运吗？ - Smamatti
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接