Question

現在レスポンシブに対応したwebサイトを制作しています。

件名のとおり、ブラウザを縮小して見た場合と、Chromeのデベロッパーで見た場合(スマホサイズ)で全体のサイズ感が異なって表示されてしまいます。

ブラウザを縮小して見た場合は、文字やナビゲーションが思い通りのサイズになってくれるのですが、
Chromeのデベロッパーで見た場合ナビゲーションなどがすごく小さくなってしまいます。

Chromeのデベロッパーで見た場合に合わせてナビゲーションのサイズを調整すると、
ブラウザで見た場合のナビゲーションが凄く大きくなって表示されてしまいます。

.slicknav_menu {
  width: 100%;
  font-size: 2em;
  box-sizing: border-box;
  background: #F7B80C;
  padding: 4.5px; }

解決策を教えて頂けますと幸いです。
宜しくお願いいたします。

Answer 1

Chromeのデベロッパーで見た場合のサイズが、スマホで見た場合のサイズと近いはずですので、こちらに焦点を合わせてナビゲーションサイズを調整される方が良いかと思います

レスポンシブルのデザインの場合、一つのcssコードだけでスマホやタブレットに対応するのが難しいので下記のように画面サイズに応じて場合分けをして、メニューサイズが最適になるようにcssを記載される事をお勧めいたします

レスポンシブルCSSの場合分けの例

/*PC用のメニューCSS ----------- */
.slicknav_menu {
}

/* スマホ用 （ポートレイト　ランドスケープ） ----------- */
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	.slicknav_menu {
	}
}
 
/* Smartphones (ランドスケープ) ----------- */
@media only screen
and (min-width : 321px) {
	.slicknav_menu {
	}
}
 
/* Smartphones (ポートレイト) ----------- */
@media only screen
and (max-width : 320px) {
	.slicknav_menu {
	}
}
 
/* iPad 等タブレット用 ----------- */
@media only screen
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
	.slicknav_menu {
	}
}