web-dev-qa-db-ja.com

iOSで実際のビューポートの幅と高さを決定する方法

ユーザーがページをズームしたときにiOSでページの幅と高さを決定するなどの簡単なタスクで立ち往生しています。

問題は、一部のWebサイトのレイアウトが奇妙で、次のようになっていることです。

enter image description here

これはスケーリングされていないページであり、解像度は1164x1811ピクセルで、これは正しいことです。これらの値はwindow.innerWidthとwindow.innerHeightから取得しています。ハイライトされた領域はボディ要素であり、重要なのは1024x1594ピクセルの解像度です。

次に、ピンチツーズームを使用してページをズームインします。これは次のようになります。

enter image description here

ここで、ページサイズを取得しようとすると、window.innerWidthとwindow.innerHeightからそれぞれ1024x1594ピクセルを取得しました。これらの値は、ボディサイズとまったく同じです。

したがって、問題は、ズームの有無にかかわらず、適切なページサイズを取得する方法です。

私はこの特定のケースをChrome=でもテストし、正しい結果を得ました。ズームに関係なく、常に1164x1811ピクセルです。

javascripthtmliossafariviewport
17
nicholas_r

EDIT：document.body.clientWidth およびdocument.body.clientHeightを使用して、私の元の解決策として、必要な計算を取得します廃止されたと見なされます。

使用できます document.widthおよびdocument.height ピンチズームした場合でも、iOS Safariで元のページサイズを取得します。

これは古い Space Jamサイト でのテストです（明らかに応答性の低いサイトについて考えようとしたときに頭に浮かびました）。

enter image description here

6
Jon Uleis

これは、トリッキーですが少し役に立たない方法です。ページサイズの要素を作成し、実際のサイズを計算/取得します。

let page_size = { height: null, width: null };
{
    let div = document.createElement('div');
    (styles => Object.keys(styles).forEach(k => div.style[k] = styles[k]))({
        height: '100vh', width: '100vw',
        position: 'fixed',
        top: '-100vh', left: '-100vw'
    })
    document.body.appendChild(div);
    page_size.height = div.offsetHeight;
    page_size.width = div.offsetWidth;
}
2
Nianyi Wang