33

デスクトップ、タブレット、スマートフォンのブラウザーを対象とした Web アプリに取り組んでいます。

Web アプリには、Colorboxを使用して実装されたライト ボックスとiframe. ブラウザー ウィンドウのサイズが変更された場合、またはタブレット/電話の向きが変更された場合、JavaScript コードはウィンドウのサイズを照会して、ライト ボックスの一部の要素のサイズを変更できるようにします。

私が抱えている問題は、デスクトップ (Windows: IE、Firefox、Chrome、Mac: Safari)、iPad と iPhone ではすべて正常に動作しますが、Android スマートフォン (HTC) と Android エミュレーターでは動作しないことです。

Android は、複数回発生するウィンドウのサイズ変更イベント内からクエリを実行するとscreen.width、 、screen.height、window.innerWidth&に対して常に異なる値を返します。window.innerHeight

Android ブラウザが値のばらつきを大きく返すのはなぜですか? また、ブラウザ ウィンドウの幅と高さを確実に検出するにはどうすればよいですか?

4

8 に答える 8

16

Android では、window.outerWidth と window.outerHeight は確実に画面サイズです。Android のバージョンによっては、通常、innerWidth/Height が正しくありません。

ここに状況に関する非常に良い記事があります。

于 2013-03-21T04:43:12.167 に答える
3

これを使用して、iosとandroidの間で機能させています。

var screenHeight = (ionic.Platform.isIOS()) ? window.screen.height : window.innerHeight * window.devicePixelRatio;
于 2015-08-06T08:43:01.633 に答える
3

回避策を見つけるのに何時間もかかりました。

、などの中window.innerHeightで唯一の定数は でした。window.outerheightscreen.height

このコードは私にアウターハイトを与えました：

screen.height / window.devicePixelRatio - window.screenTop

また、Android の古いバージョンをサポートするには、コードをsetTimeout

これがお役に立てば幸いです=）

于 2012-10-04T10:01:33.770 に答える
2

これを試して、モバイルの読み取り値を確認してください

<script>
var total_height=screen.height*window.devicePixelRatio;
alert(total_height);
</script>

お使いの携帯電話の仕様の画面サイズ (高さ) に一致する必要があります。

于 2014-11-19T12:36:42.333 に答える