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>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Du bist fast da.
Versuchen Sie, die erste-Skala, das sollte den trick tun.
<meta name="viewport" content="width=default-width, initial-scale=1" />
Verwandte:
Ja, ich weiß, es ist etwas zu Lesen zu tun 😉
Aktivieren pinch:
user-scalable=yes