【CSS】iOSで@mediaが効かなくて焦った話 (解決はした)

どうも、カクミンです。

普段の業務はテスターとして勤務しつつ、
たまーーーに HTML等を触っている程度の人間なのですが、
そんな僕でもバグに焦ることはありますあります。(食い気味)

バグは辛いよどこまでも

エラーはつれぇよ。

OSやブラウザによって出力結果が変わるのはもう泣き崩れます。

最近だと、PCとスマホで画面のデザインが変わるように CSS を書いた時に起きた出来事ですね。

スマホの画面で表示した時、ナビゲーションメニューの CSS が効かなくなったんですよね。
リスト君…。

突然、生まれたての姿を赤裸々に晒したリストを見て SANチェックが入りました…。(SAN値 -3)

原因は @media 君の引数

この不具合を無くすために色々試したんですよね。

セレクタの順番を変えたり、
親子関係の要素を指定している部分に “>” を入れたり、
逆に抜いたり

ま、全部だめだったんですが。

それで最終的にたどり着いたのが、@media のところの () 内でした。

ここは @media{ } の中のスタイルを適用するディスプレイのサイズを指定する部分で、2種類の書き方があることを知っていました。(他にあるかは知らん)

CSS

/* 1つ目の指定の仕方 */
@media (width <= 820px) {
	#menu nav {
		position: fixed;
		right: -320px;
		top: 0;
		z-index: 200;
		padding-top: 56px;
		width: 300px;
		height: 100vh;
		overflow-y: auto;
		background-color: #fff;
		transition: all 0.6s;
	}
}

/* 2つ目の指定の仕方 */
@media (max-width: 820px) {
	#menu nav {
		position: fixed;
		/* 以下略 */
	}
}

・width / height に不等号 (<, >等) で指定する方法
・max-○○, min-○○ で指定する方法

はじめ、僕は1つ目の指定方法を使い、スマホ / タブレットとPCとを判別させていました。が、それが良くなかったｯ！

雑に言いますが、2つ目の指定方法に書きなおしたら、通りました。

はい、この話しゅーりょー！！
解散！

灯台下暗しというかなんというか、色々やった後にこれで正常に動作した時の僕の気持ちよ。

まぁ良いですけど。解決したんで。(諦め)