同じ高さでビューポートを維持する

Question

ピクセルサイズが固定されたページには、常に同じ高さの高さが必要です。私は既にピクセル単位でサイト全体を作っているので、％や他の相対単位を使うことはできません。

1500pxの高さでdivを表示し、1366x768の画面で表示すると、1500px div全体が完全に見えるはずです。

私が達成したい効果は、ブラウザのズームに似たものです。

Answer 1

divにmin-height: 1500px;と入力し、bodyまたはhtml要素にoverflow-y: autoを入力します。

ウィンドウの高さに応じて動的にサイズを変更するには、CSSフレックスボックス、vhサイジング、またはjavascriptを使用してウィンドウのサイズ変更を検出します。

Answer 2

これにはviewport meta tagを使用できます。 "initial-scale = 1"部分を削除すると、ページは常に画面に合わせてレンダリングされます。

この場合、ページが非常に小さく見えることがあり、スマートフォンなどでページにアクセスするときに問題が発生する可能性があることに注意してください。さまざまなデバイスや画面用にページを最適化する場合は、responsive webdesignに慣れ親しむことをおすすめします。

高さ：100vhのようなもの。オブジェクトの高さをビューポートの高さの100％にします。 pxから別のものに切り替える方法がないようです。