ページのビューポート幅は、横長で950ピクセル、縦長で630ピクセルにする必要があります。残念ながら、これらのピクセル幅には柔軟性がありません。
CSSメディアクエリを使用して、方向に基づいてDOMコンテンツの幅を調整しています。
JSで方向変更イベントをリッスンして、方向変更時にビューポートのサイズを変更します。
最初のページの読み込み(ポートレートまたはランドスケープ)ではすべてが適切に見えます。
ただし、向きの変更後、Mobile Safariは、ビューポートを画面に合わせるのではなく、以前のスケール設定を保持します。ダブルタップまたは2つでそれをまっすぐにします。しかし、自動化する必要があります。
以下にソースを添付し、デモにアップロードしました [〜#〜] url [〜#〜] 。
以下は、向きを変更した後に撮影した画面キャプチャです:横から縦へ、および縦から横へ。
Safariでビューポートの幅を画面の幅に自動的に設定するにはどうすればよいですか?それとも私はこれについて間違っていますか?
ビューポートのさまざまな縮尺設定を変更しても解決しませんでした。設定maximum-scale=1.0
またはinitial-scale=1.0
はwidth
をオーバーライドし、width
をdevice-width
(iPad 2では1024または768)、デッドマージンスペースを残します。設定minimum-scale=1.0
は何もしないようです。
<!DOCTYPE html>
<html>
<head>
<title>iPad orientation</title>
<meta name="viewport" content="user-scalable=yes">
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">;
/**
* update viewport width on orientation change
*/
function adapt_to_orientation() {
// determine new screen_width
var screen_width;
if (window.orientation == 0 || window.orientation == 180) {
// portrait
screen_width = 630;
} else if (window.orientation == 90 || window.orientation == -90) {
// landscape
screen_width = 950;
}
// resize meta viewport
$('meta[name=viewport]').attr('content', 'width='+screen_width);
}
$(document).ready(function() {
// bind to handler
$('body').bind('orientationchange', adapt_to_orientation);
// call now
adapt_to_orientation();
});
</script>
<style type="text/css" media="screen">
body {
margin: 0;
}
#block {
background-color: #333;
color: #fff;
font-size: 128px;
/* landscape */
width: 950px;
}
#block .right {
float: right
}
@media only screen and (orientation:portrait) {
#block {
width: 630px;
}
}
</style>
</head>
<body>
<div id="block">
<div class="right">→</div>
<div class="left">←</div>
</div>
</body>
</html>
私はこの問題を抱えていて、それを修正するためにJavaScriptをいくつか書きました。ここでGithubに配置します。
https://github.com/incompl/ios-reorient
便利なコードを次に示します。
window.document.addEventListener('orientationchange', function() {
var iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/g);
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (iOS && viewportmeta) {
if (viewportmeta.content.match(/width=device-width/)) {
viewportmeta.content = viewportmeta.content.replace(/width=[^,]+/, 'width=1');
}
viewportmeta.content = viewportmeta.content.replace(/width=[^,]+/, 'width=' + window.innerWidth);
}
// If you want to hide the address bar on orientation change, uncomment the next line
// window.scrollTo(0, 0);
}, false);
OK、答えは結局*-scale
属性にあります。
maximum-scale
とminimum-scale
の両方を同じ値に設定することにより、特定のスケールを強制できます。ただし、メタタグを<meta name='viewport' content='user-scalable=no' />
に設定して、ユーザーのスケーリングを犠牲にする必要があります。
*-scale
の設定は、デバイスの画面サイズに関連していることに注意してください。これはデバイスごとに異なります。幸い、JSのscreen
オブジェクトでこれらを調べることができます。
したがって、コンテンツの幅が980未満の場合、強制スケールはscreen_dimension / content_width
になります。
上記のJSのこの更新バージョンにより、方向の変更がスムーズに機能します。 iPhone 4およびiPad 2でテスト済み。
function adapt_to_orientation() {
var content_width, screen_dimension;
if (window.orientation == 0 || window.orientation == 180) {
// portrait
content_width = 630;
screen_dimension = screen.width * 0.98; // fudge factor was necessary in my case
} else if (window.orientation == 90 || window.orientation == -90) {
// landscape
content_width = 950;
screen_dimension = screen.height;
}
var viewport_scale = screen_dimension / content_width;
// resize viewport
$('meta[name=viewport]').attr('content',
'width=' + content_width + ',' +
'minimum-scale=' + viewport_scale + ', maximum-scale=' + viewport_scale);
}
この投稿の知恵を使用して、スクリプトのコンテナの幅と高さ(ウィンドウの幅と高さ)を取得します... https://stackoverflow.com/a/9049670/818732
このビューポートを使用:target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no
は、Android AND iosで私の問題を解決しました。target-densitydpiは他のすべてのデバイスでフラグが立てられますが、Android何も自動的にスケーリングされないようにします。
IOSで同様の問題が発生しました。いくつかのテストがここで見つけることができる解決策で終わった後
私のソリューションではズームは無効になっていますが、「user-scalable = no」を自由に削除してズーム可能にすることができます。