これは以前にここで尋ねられましたが、解決されなかったので、過去1年間に誰かがこれを行う方法を見つけたかどうかを確認することにしました:
デフォルトでは、ビューポート メタ タグが存在しない場合、iPhone と Android は自動的にページをズームしてフレームにうまく収まるようにします。デスクトップ用に設計された Web サイトは、小さなビューポート内に収まるようにズームアウトされますが、明らかに、ピクセルは実際には正しく表現されていません。
では、モバイル ブラウザでフル サイズの Web ページを表示して、「300px」がモバイル デバイスの画面上で実際に 300 ピクセルで表示されるようにするにはどうすればよいでしょうか。
メタビューポート方式については知っていますが、今までの話から、その場合のピクセル比率は、ズームを100%、横幅をdevice_widthにすると1.5か1.0になり、モバイル デバイスがレンダリングしているピクセル比を検出できます。デバイスに明示的に 1.0 ピクセル比率のみを使用させ、1.5 ピクセル比率を使用させないようにする方法を見つけることができないようです。
デバイスが 1.0 のピクセル比を使用して、CSS で定義されている 300 の「ピクセル」が実際にモバイル デバイスの画面上で 300 ピクセルにわたってレンダリングされるようにするにはどうすればよいですか? ピクセル比 1.5 ではなく、実際の実際のサイズで Web ページを表示するにはどうすればよいですか?
私が望まない例を次に示します: 現在、meta タグを使用してモバイル ブラウザのビューポート プロパティを次のように設定する場合:
<meta name="viewport" content="width=device_display, initial-scale=1.0" />
つまり、モバイル ブラウザは、ページが設計されたときとほぼ同じようにページをレンダリングします。ただし、CSS で定義された各「ピクセル」は実際にはデバイスの画面上で 1.5 ピクセルを含むため、ピクセル比は 1.5 になります。この 1.5 ピクセル比率の規則は、高解像度デバイスでデザインが小さすぎないように設定されています。
私はそれを理解していますが、私の場合はそれを望んでいません。
常に 1.0 の強制ピクセル比が必要であり、高解像度デバイスを独自の方法で処理します。モバイル ブラウザーで 1.0 ピクセル比率を強制するにはどうすればよいですか?
* *単純にピクセル比を 2 倍にする方法があれば、それもうまくいきます