モバイル デバイス用の Web サイトを作成する必要があるため、iPhone とさまざまな Android 用です。問題は、ビューポートを正しく設定するのに苦労していることです。私の目標は、Web ページが特定の幅 (640px 幅など) に合わせてコーディングされるようにすることです。次に、一度開いたデバイスが画面の幅にズームイン/アウトすると、デバイス画面をピンチしてズームイン/アウトした後のように、すべてが同じように拡大または縮小されます。
だから私はそれを640pxの幅で開発したいと思います。デバイスによっては、開くと拡大または縮小します。したがって、デバイス画面の幅が 960px の場合、何らかの方法でビューポートを介してこの幅に自動的にスケーリングされます。css で定義済みの幅をコード化し、デバイス自体で必要に応じてズームイン/ズームアウトすることは可能ですか?
質問が一般的すぎる場合は申し訳ありませんが、必要に応じて詳細を説明します。
編集:私が正しく理解している場合、最も一般的なアプローチは、ほとんどの一般的な画面サイズに対していくつかのレイアウトバージョンを提供することですか? css でメディア クエリを使用すると、幅、フォント サイズなどに異なる値が提供されます。
ただし、メディアクエリではなくパーセンテージを使用することにした場合、提供されたデザインを考えると、レイアウトにはテキストを含む画像があり、テキストは画像に比例する必要があるため、フォントのサイズ変更にまだ問題があると思います. また、パーセンテージは幅を処理しますが、画像の垂直方向のサイズも変更する必要があるため、高さが問題になる可能性があります。デザインのいくつかの部分は、お互いに「合わせる」必要があるようで、それが問題になると思います。
ここで、特定の幅の Web サイトを単純に構築すると、640 ピクセルとしましょう。通常の非モバイル Web サイトと同じように、すべてをピクセルで画面に配置できるはずです。
そこで<meta name="viewport" content="width=640">、css で最も広いコンテナの幅をページ内で 640px に設定して、基本的にページ幅を 640px に設定しようとしました。私が正しく理解していれば、ビューポートをページの正確な幅に設定します。そのため、ページは他の非モバイル Web ページと同じように作成されます。ページが開くと、通常何らかの理由でズームイン/ズームアウトされるため、ユーザーはピンチしてスケールを調整する必要があります。ここで何が起こっているのかについての私の理解は正しいですか、それとも何か問題がありますか。ビューポートは常に同じで、ページ幅に収まり、スケールのみが問題のように見えるため、事前定義されたサイズを使用すると、さまざまなモバイル画面サイズが処理されます。
また、ポートレートのみを実行し、それをオプションのみにする必要があることにも言及する必要があったため、ランドスケープ ビューはありません (これは別の質問になります)。
あなたの考えを知りたいです。これまでのすべての回答に感謝します。