JQuery移动设备扩展

Question

JQuery移动设备扩展

我正在使用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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jas*_*per 34

我也遇到了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上的方向时,我注意到一些奇怪的行为,重新缩放并添加了空白区域,因此我使用了以下代码:

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

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

归档时间：	14 年，11 月前
查看次数：	36605 次
最近记录：	13 年前