あなたの記事に適した質問ベースのタイトルをいくつか紹介します。 * iOS 7 iPad Safari ランドスケープモードで window.innerHeight が window.outerHeight より 20px 小さいのはなぜですか?それを修正するにはどうすればよいですか? * 解決方法-CSSチュートリアル-php.cn

あなたの記事に適した質問ベースのタイトルをいくつか紹介します。 * iOS 7 iPad Safari ランドスケープモードで window.innerHeight が window.outerHeight より 20px 小さいのはなぜですか?それを修正するにはどうすればよいですか? * 解決方法

Patricia Arquette

リリース： 2024-10-26 08:50:30

オリジナル

635 人が閲覧しました

Here are a few question-based titles that fit your article:

* Why is window.innerHeight 20px smaller than window.outerHeight in iOS 7 iPad Safari landscape mode, and how can I fix it?
* How to Resolve Inconsistent Height Reporting in iOS 7 iPad Safari La

iOS 7 iPad Safari ランドスケープの高さレポートに一貫性がない: 問題の解決

iOS 7 iPad Safari ランドスケープモードでは、ウィンドウ間に特有の不一致が発生します。 .innerHeight と window.outerHeight、20 ピクセルの差があります。この問題は、高さ 100% の Web アプリに影響を及ぼし、予期しない動作を引き起こします。

これに対処するために、体の位置の調整を含む解決策が登場しました。

<code class="css">@media (orientation:landscape) {
    html.ipad.ios7 > body {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 672px !important;
    }
}</code>

ログイン後にコピー

このコードは、条件付きでbody の位置を変更して、高さが window.innerHeight と一致するようにします。さらに、iOS 7 を実行している iPad デバイスを検出するためにスクリプトが使用され、CSS クラスがに動的に追加されました。ターゲットスタイルの要素:

<code class="javascript">if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('html').addClass('ipad ios7');
}</code>

ログイン後にコピー

これらの変更を実装することで問題が解決され、Web アプリが高さを正確に計算し、iOS 7 iPad Safari ランドスケープモードでの 20 ピクセルの不一致を回避できるようになりました。

以上があなたの記事に適した質問ベースのタイトルをいくつか紹介します。 * iOS 7 iPad Safari ランドスケープモードで window.innerHeight が window.outerHeight より 20px 小さいのはなぜですか?それを修正するにはどうすればよいですか? * 解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。