目標：
address barmin-body のサイズを動的に変更してコンテンツを押し上げることができるように、デバイスの最大ビューポートの高さを見つけます。これには、のスペースが含まれます。
問題：
モバイル ブラウザーは、向きの状態を異なる方法で処理し、向きの変更時に異なる方法で DOM プロパティを更新します。
JavaScript を使用してブラウザーで Android フォンの回転を検出する
Android フォンの場合、screen.widthまたはscreen.heightデバイスの回転に合わせて更新することもできます。
|==============================================================================|
| Device | Events Fired | orientation | innerWidth | screen.width |
|==============================================================================|
| iPad 2 | resize | 0 | 1024 | 768 |
| (to landscape) | orientationchange | 90 | 1024 | 768 |
|----------------+-------------------+-------------+------------+--------------|
| iPad 2 | resize | 90 | 768 | 768 |
| (to portrait) | orientationchange | 0 | 768 | 768 |
|----------------+-------------------+-------------+------------+--------------|
| iPhone 4 | resize | 0 | 480 | 320 |
| (to landscape) | orientationchange | 90 | 480 | 320 |
|----------------+-------------------+-------------+------------+--------------|
| iPhone 4 | resize | 90 | 320 | 320 |
| (to portrait) | orientationchange | 0 | 320 | 320 |
|----------------+-------------------+-------------+------------+--------------|
| Droid phone | orientationchange | 90 | 320 | 320 |
| (to landscape) | resize | 90 | 569 | 569 |
|----------------+-------------------+-------------+------------+--------------|
| Droid phone | orientationchange | 0 | 569 | 569 |
| (to portrait) | resize | 0 | 320 | 320 |
このため、デバイスの最大高さを返す単一の関数を使用してデバイスの最大高さを返すことは、デバイスの範囲で決して一定ではないことは明らかです。
私が発見したその他の問題により、これら 2 つの機能がうまく動作しません。
window.devicePixelRatioで除算すると、このプロパティは一貫性のない高さを返す場合がありwindow.outerHeightます。- 向きの変更後に DOM 要素に更新の機会を与えるには、遅延
window.setTimeout(function() {}, time)を使用する必要があります。 window.outerHeightiOS デバイスの向きの変更では更新されません。フォールバックとして使用screen.availHeightすると、下部のナビゲーション バーが全体の高さとして含まれます。#header,#content,#footer構造体を使用すると、 が動的に更新されたときに#content{min-height}を押し下げるためにを動的に再計算する必要があります。#footerbody
解決策：
まず、DIV 構造を見てみましょう。
<style>
#header,#content,#footer{width:100%;}
</style>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
デバイスが独自にスケーリングするのを防ぎたい:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
ビューポートの最大高さを返し、iOS のアドレス バーを非表示にする機能を持たせるには、助けが必要です。
<script src="iOS.js" type="text/javascript"></script>
次に、デバイスが向きの変更をサポートしているかどうかを検出し、サイズ変更をフォールバックとして使用します。
var iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/i) ? true : false);
var android = (navigator.userAgent.match(/Android/i) ? true : false);
var supportsOrientationChange = "onorientationchange" in window;
var orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
獣の腹：
function updateOrientation()
{
var orientation = (window.orientation);
if(android)
{
window.setTimeout(function() {
window.scrollTo(0,0);
var size = window.outerHeight/window.devicePixelRatio;
$('body').css('min-height', size + 'px');
var headerHeight = $('#header').height();
var footerHeight = $('#footer').height();
var contentHeight = size - (headerHeight+footerHeight);
$('#content').css('min-height', contentHeight + 'px');
window.scrollTo(0,1);
}, 200);
}
if(iOS)
{
window.setTimeout(function(){
window.scrollTo(0,0);
var size = iOS_getViewportSize();
var headerHeight = $('#header').height();
var footerHeight = $('#footer').height();
var contentHeight = size.height - (headerHeight+footerHeight);
$('#content').css('min-height', contentHeight + 'px');
window.scrollTo(0,1);
}, 0);
}
}
ページの読み込みと向きのイベントのイベント リスナーを追加します。
if(iOS)
{
iOS_addEventListener(window, "load", iOS_handleWindowLoad);
iOS_addEventListener(window, "orientationchange", iOS_handleOrientationChange);
iOS_addEventListener(window, "resize", iOS_handleReize);
}
addEventListener("load", function()
{
updateOrientation();
}, false);
addEventListener(orientationEvent, function() {
updateOrientation();
}, false);
証拠はプリンにあります：
iPhone 4 & 4s ポートレート & ランドスケープ
Android ポートレート & ランドスケープ
