jQuery mobile-Seiten super große in Safari mobile

Ich bin versucht zu reparieren, ein Problem bei der Anzeige auf meinem jQuery mobile-site. Es sieht gut aus, in anderen Browsern aber bei der Anzeige auf dem iPhone in Safari, alles ist super groß und man kann Sie nicht verkleinern Sie die Seite mit Prise.

Beispielsweise eine einfache h2-element nimmt den Großteil des Bildschirms.

    <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> 

InformationsquelleAutor Will Curran | 2011-06-17
Schreibe einen Kommentar