レガシー Web アプリケーションをモバイル デバイスで「適切に」実行しようとしています (「適切に」とは、主に CSS を微調整して、テキストを読みやすくし、余分な画像や効果を非表示にすることを意味します)。さまざまな理由 (多くのグラフィック ファイルは現在変更できません) により、携帯電話では幅 480 ピクセル、タブレットでは幅 630 ピクセル、デスクトップ ブラウザーでは幅 1024 ピクセルに決定しました。
これまでに、スマートフォンとタブレット用に 2 つの CSS グループを作成しました。
@media only screen and (min-width:631px) and (max-width: 1000px) { ... }
と
@media only screen and (max-width:630px) { ... }
それぞれ固定ページ幅 (それぞれ 480 ピクセルと 630 ピクセル) で、ページの一部が変更されています (たとえば、電話バージョンにはホバー メニューの代わりにドロップダウン メニューがあります)。
Chrome などのデスクトップ ブラウザでは、これは問題なく動作します。ウィンドウの幅を変更すると、それに応じてページ レイアウトが変更されます。ただし、iPhone と iPad では、これは完全には機能しません。
- Retina 以外の iPad (幅 768 ピクセル) では、(幅 630 ピクセル) ページの左右に白い境界線が表示されますが、CSS は正しく選択されています。
- Retina iPhone にはタブレット バージョンが表示されますが (幅が 640px であるため)、低解像度バージョンを使用したいと考えています。他の高解像度 (>140dpi など) ディスプレイについても同様です。
他のタブレットや携帯電話 (ただしエミュレーター) も、ほとんどの場合正しい CSS メディア クエリ グループを選択しますが、ページを全幅にズームしません。
デバイスの幅に関係なく、ページ幅が常に使用可能な幅の 100% を占めるようにするにはどうすればよいですか? つまり、ページを全幅にズームしますか? 「ビューポート」パラメーターをいじってみましたが、これは固定パラメーターであり、ユーザー エージェントや実際のデバイスの幅に応じて変更することはできません (これを試みる JS ハックは今のところ機能しませんでした)。
どんなアイデアでも大歓迎！