web-dev-qa-db-ja.com

iOSがwindow.innerHeight / Widthに不正な値を返す

私はwindow.innerHeightとwindow.innerWidthの手順を使用して、ブラウザーの使用可能なウィンドウサイズを取得しています。 Firefox、Safari（Mac）およびAndroid=で動作しますが、iOSでは奇妙な結果になります。

iOSは常にinnerHeight = 1091およびinnerWidth = 980を返します。

IOS SDKのiOSエミュレーターを使用しています（iPhone/iPodを所有していません）。 iPhoneおよびiPhone Retinaエミュレーターでも同じ値が返されます。 2つのモデルには2つの異なる画面解像度があるため、両方が同じ数値を返す方法を理解できません。

私は成功せずにビューポートパラメータで遊んだ。

javascriptiphoneios
28
ohmer

screen.width の代わりに window.innerWidth。

<script>
  if (screen.width > 650) {
    ....
  }
</script>
17
Senya

追加

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">

<head>要素。 innerWidthの問題が修正されます。

網膜には高密度のピクセルがあり、基本的には4つのハードウェアピクセルから1つの論理ピクセルまでです。彼らが同じ解決策を報告す​​るのはそのためです。

6
dan gibson

同じ問題で立ち往生していた。ここに私のために働いた解決策があります。

まず、クライアントがiOSデバイスかどうかを検出しています。次に、 画面インターフェイス を使用して正しい値を取得しています

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; 
var iw = (iOS) ? screen.width : window.innerWidth, ih = (iOS) ? screen.height : window.innerHeight;
5
Sergei Panfilov

iOS最新バージョンは、iOSが解像度を読み取るため、window.innerHeightおよびwindow.innerWidthをサポートしていません。

だから、これを使うことができます：

screen.width
screen.height

Appetize.ioエミュレーターiPhoneで試してみました。

1
M Fauzi Riozi

Mobile Safariのビューポートを設定する方法とそのスケーリング方法については、Appleのドキュメントを確認してください。 http://developer.Apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html

基本的に、ビューポートの縮尺を設定し、HTMLページにメタタグを設定することで、デフォルトを希望どおりに設定できます。

1
pgb

また、これに従ってビューポートメタタグで高さを指定します。

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

IPad 2（5.0.1）でjQuery $（window）.height（）を使用するときに問題がありました。メタタグで高さを指定し忘れていたためです。追加した後は、はるかにうまく機能します。

1
Valleywood

TL; DR：document.documentElement.clientHeight/Widthを使用

これは質問に対する回答ではありませんが、ブラウザに表示されるドキュメントのサイズに基づいて操作を行う場合に役立ちます。

window.innerWidth（および高さ）は、適切なビューポートメタタグを使用している場合でも、モバイルブラウザーで奇抜になることがあります。一部のブラウザでは、非常に一貫性がない場合があります。

screen.widthはモバイルブラウザーでより適切に機能しますが、screen.widthはさらに多くの機能を備えているため、方向性と、ブラウザーがモバイルかデスクトップか（両方に応答する必要がある場合）かどうかを考慮する必要があります。 window.innerWidthと比較したデスクトップのバリエーション。

私の経験では、document.documentElement.clientWidthが最善の方法です。モバイルブラウザーはwindow.innerWidthよりもこの属性の方がはるかに一貫性があり、ブラウザーウィンドウやデバイス画面ではなくhtml要素のサイズを扱っているため、モバイルとデスクトップ間で一貫性があり、向きは考慮する必要はありません。

1
Jacquen