メディア クエリを使用して、ページの幅が何インチかによってページの表示方法を変更する CSS スタイルシートがあります (たとえば、4 インチより小さい場合やハンドヘルド デバイスで表示されている場合は、より多くのモバイル デバイスを想定しています)。友好的なLAF）。
私が抱えている問題は、その内容にあります。ホームページには、ウィンドウの現在の高さと幅に基づいて動的に高さを変更するドック スタイルのインターフェイスがあり、テキストとアイテムが画面からはみ出すことはありません。ただし、このサイズを決定する私の JS は、ハンドヘルド デバイスまたは小さな画面用にスタイルシートがいつ変更されたかを認識しないため、このモードでは動作が予期せず継続します。ページが 4 インチ以下であることを検出する JavaScript を使用して、再形成されたドックの自動サイズ変更を無効にするにはどうすればよいですか?
これは重要な問題です。
getUnits選択した測定単位（インチを含む）で現在の計算されたスタイルを取得する関数（）を持つサイトへのリンクは次のとおりですhttps://web.archive.org/web/20120427144951/http://upshots.org ：80 / javascript / javascript-get-current-style-as-any-unit
この関数を使用して、を確認できif (getUnits(document.body, "width").inch < 4)ます。この関数が機能する方法は、不思議なことに、目的の測定空間に一時的な要素を作成し、ピクセルに対する比率を読み取ることです。このようにして、ブラウザが自身の知識に基づいてデバイスのPPIに応答できるようにします。したがって、これは一種のポリフィルですがwindow.devicePixelRatio、ブラウザは主にPPIについて嘘をついています。ただし、これらの目的では、インチ単位のCSSに同じ嘘を適用するため、問題ではありません。
あなたは間違った角度から問題を見ていると思います。あなたはインチについて考えるべきではありません。あなたが知る必要があるのは：デバイスとブラウザを考えると、私のページは何ピクセルの高さである必要がありますか？
答えは、既知のデバイスのセットとそれぞれのピクセルの高さを維持することにあります。
たとえば、iPhone5はiPhone4よりも背が高いため、目的の効果に影響します。
できることは、既知の要素の現在のスタイルを読み返すことだけです。外部ラッパー DIV の幅などを調べることで、メディア クエリでどのスタイルシートが使用されているかを判断できます。