レスポンシブに必須なJavaScriptによるクライアントのサイズ取得

 

いろいろ条件あるけども。

・ブラウザ互換
・端末自体の画面サイズ
・UIタスクバーの高さ
・自動回転
・スクロール
・画面に収まっているか
・ディスプレイ密度
・処理速度

なんか最近、複雑になってきていますけど。

Dashboards___Android_Developers

以下、横幅(width)取得に関係ありそうなのでもこんなに。

・window.innerWidth
・window.outerWidth
・window.screen.width
・window.screen.availWidth
・window.devicePixelRatio
・window.navigator.standalone
・document.documentElement.clientWidth
・document.body.clientWidth
・document.body.offsetWidth
・document.body.scrollWidth
・document.documentElement.clientWidth
・document.documentElement.offsetWidth
・document.documentElement.scrollWidth

Web API reference | MDN Web API reference | MDN

きっと、これらを利用して最強マルチにしたのが、jQueryでの

「$(window).width()」

なのでしょうが、そこまで必要なければ
速度面を考慮しての

「document.documentElement.clientWidth」

でしょうか。

とりあえず、今その端末で以下URLにてお試しから。

Device and Viewport Size In JavaScript Device and Viewport Size In JavaScript

Chrome側のサイズとかUAとか変えながらやるのがよいです。

拡張要らずでお手軽にGoogle Chromeのユーザエージェントを変更する方法 拡張要らずでお手軽にGoogle Chromeのユーザエージェントを変更する方法


関連ワード:  Android・WEB・開発・・