訪問者に高品質の画像を表示できるようにしたいのですが、ウィンドウ サイズを検出する方法はありますか?
あるいは、JavaScript を使用したブラウザのビューポート サイズはどうでしょうか? ここの緑色の領域を参照してください:
ベストアンサー1
クロスブラウザ @media (width)そして@media (height)価値観
let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
window.innerWidthそしてwindow.innerHeight
- 取得CSS ビューポート
@media (width)スクロールバーを@media (height)含む initial-scaleズームバリエーションモバイル値がPPKが呼ぶ値に誤って縮小される可能性があります視覚ビューポート@media値よりも小さくなる- ズームすると、ネイティブの丸めにより値が 1 ピクセルずれる場合があります。
undefinedIE8の場合-
document.documentElement.clientWidthそして.clientHeight
- CSSビューポートの幅からスクロールバーの幅を引いた値に等しい
- 一致
@media (width)し、スクロールバーがない@media (height)場合 - と同じ
jQuery(window).width()どれのjQuery ブラウザビューポートを呼び出す - クロスブラウザで利用可能
- doctype が欠落している場合は不正確
リソース
- さまざまな次元のライブ出力
- 限界クロスブラウザビューポート技術を使用する
- 実際の
matchMedia任意の単位で正確な寸法を取得するために使用します