jQuery移動頁面超大Safari瀏覽器移動

我想解決我的jQuery手機網站上的顯示問題。它在其他瀏覽器中看起來很棒，但在Safari上的iPhone上查看時，所有內容都超大，並且無法縮小頁面。jQuery移動頁面超大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>

來源

2011-06-17 Will Curran