ヘッダーありキービジュアル領域縦横フルは、ヘッダー高さを固定・calcで縦計算しないと実現不可能

ヘッダーなし・キービジュアルフルブラウザの場合は、height 100% / 100vhどちらかにすれば容易に実現可能。

が、

  • ヘッダーあり
  • ヘッダー高さは相対可変
  • その下に縦横フルキービジュアル

にしてレスポンシブさせると、キービジュアル領域縦に余白が発生してしまう。
キービジュアルの高さも相対可変してしまい、無数のデバイスごとのレンダリング差異を吸収できなくなるから。

従って、この種のデザインをコーディングする時はヘッダー高さを固定ピクセル化する。
※Firefoxのみなぜか1pxのズレが発生するので、専用ハックでコード追加。

 

PC 1600px

PC 1280px

Galaxy Note 2

Galaxy S5

Nexus 4

Nexus 5X

Nexus 6P

iPhone 4

iPhone 5

iPhone 6

iPhone 6 Plus

iPad Mini

iPad

iPad Pro

ヘッダー高さを相対可変にしたいクライアント・Web制作会社の場合は、社内で解決策を知っている人がいるか逆に質問しよう。

制作会社以外のクライアントの場合は「CSSの仕様、及び無数にあるデバイスごとにレンダリング違うから固定」と説明して乗り切る。

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは、一度だけクリックしてお待ちください。