webmanab.html

menu

固定幅のサイトを、そのサイズ以下のウィンドウを持つデバイスでも画面ぴったりに表示する方法 – 『HTML5』

　

viewportの設定

レスポンシブサイトを制作する際はおまじない慣例として以下のビューポート設定を行うことが多いです。

html


<meta name="viewport" content="width=device-width, initial-scale=1">

ですが、固定幅のサイトを制作する際、例えば上位のブロックに最小幅指定(min-width: ...)があると、上記コードだと画面幅ぴったりに表示されません。

ブラウザはwidth=...に指定したサイズのviewportにレンダリングして、そのサイズの仮想的なウインドウをデバイスのデイスプレイに作ります。
width=device-widthはviewportを端末やブラウザアプリ毎に合わせてレンダリングするので、最小幅や固定幅を指定している場合は、これより大きいとはみ出してしまいます。

content=widthに固定サイズを指定する

なので、ここではおまじないは使えないので、固定表示している幅の数値をviewportのwidth=...に指定します。
以下はサイトの最小サイズが1040pxのサイトの場合です。

html


<meta name="viewport" content="width=1040, user-scalable=yes">

おわります。

share
ー

tag
ー

tip