Safari 移动版中的 jQuery 移动版页面超大答案

【问题标题】：jQuery mobile pages super large in Safari mobileSafari 移动版中的 jQuery 移动版页面超大
【发布时间】：2011-09-17 09:39:12
【问题描述】：

我正在尝试修复我的 jQuery 移动网站上的显示问题。它在其他浏览器中看起来很棒，但在 iPhone 上的 Safari 浏览器上查看时，一切都超级大，您无法通过捏合来缩小页面。

例如，一个简单的 h2 元素占据了大部分屏幕。

    <meta name="viewport" content="width=device-width; 
          height=device-height; user-scalable=no" />

    <title>Start</title> 

    <meta name="viewport" content="width=device-width; height=device-height; user-scalable=yes" />
    <link rel="stylesheet" href="/static/css/android.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />

    <script src="https://www.google.com/jsapi?key=ABQIAAAApPeof0WyN6ORT7NeNop5OxQhS8mdepxW5-6qUjpskYmhafYcLRQjyW8D0bRdsydbD1maEkV9aSDKrw" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>

    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
    <script type="text/javascript">
    // Check for iPhone screen size
    if($.mobile.media("screen and (min-width: 320px)")) {
        // Check for iPhone4 Retina Display
        if($.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)")) {
            $('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5');
        }
    }

    </script>

</head>
<body>
    <div data-role="page" id="start">

        <div data-role="header" data-theme="a">

            <h1>Start</h1>
        </div><!-- /header -->          

        <div data-role="content" id="content">  
            <h2>Adventure with:</h2>
            <div id="buttons">

                <a href="/mobile/char/ahBkMjBtLW1vcm5pbmdzdGFycg8" data-role="button" target="_blank">Spam Master</a>                   

                <a href="/mobile/char/create" data-role="button" target="_blank">CREATE NEW FOO</a>         
            </div><!-- /buttons -->
        </div><!-- /content -->

    </div><!-- /page -->    

</body>

【问题讨论】：

标签： iphone safari jquery-mobile

【解决方案1】：

你快到了。尝试设置初始比例，这应该可以解决问题。

<meta name="viewport" content="width=default-width, initial-scale=1" />

【讨论】：

【解决方案2】：