「ハンドヘルド」用と「タブレット」用の 2 つのレイアウトで Phonegap アプリケーションを構築しています。6 インチより大きいデバイスにはタブレット レイアウトを表示し、それより小さいデバイスにはハンドヘルド レイアウトを使用するようにします。
メディアクエリを調べました。私の懸念は、iPad1 などのピクセル サイズでデバイスをターゲットにすると、768px高密度ハンドヘルドもこのクエリの対象となり、間違ったレイアウトが表示され、テキストが判読不能になり、ウィジェットが小さすぎることです。このクエリについて検討webkit-min-device-pixel-ratio > 2しましたが、解像度とピクセル比の不幸な組み合わせがハンドヘルド デバイスでタブレット テンプレートをトリガーする「ギャップ」を残していませんか?
では、デバイスのロード時にこれら 2 つのレイアウトのいずれかを確実に選択する (そしてデバイス間のオーバーラップを回避する) ために従うことができる一般的な戦略は何ですか? ポートレート モードのみをサポートしており、すべての CSS、JS<meta name="viewport">などを変更できます。
基本的に、ここhttp://nmsdvid.com/snippetsの列 2 と 3 を区別するためのいくつかのルールを考え出すことができるようにしたいと考えていますが、特定のデバイス モデルをターゲットにすることはありません。
ありがとう！