min-widthのリセット時はinitialとautoを併用
古いAndroidでmin-widthが効かない!
これまで、PC表示時に設定したmin-widthをスマホ幅でリセットする際、min-width: auto; を使用していました。
しかし先日バージョンの古いAndroid端末で表示確認をした際、min-widthのリセットが効いておらずスクロールバーが出てしまっているのを発見!
あらためて調べ直し、以下の方法で解消しました。
min-widthのリセットにはinitialとautoをセットで記述!
min-widthをリセットするにはinitialとautoを併用する事で解消しました。
1 2 3 4 5 6 7 8 9 10 |
div{ min-width: 1000px; } @media only screen and (max-width: 768px) { div{ min-width: initial; min-width: auto; } } |
なお、min-widthの他に、min-height、max-width、max-heightをリセットする際にも
initialとautoを併用します。
initialとは?
各プロパティを初期値に戻す設定値です。CSS3から使用可能になりました。
全てのCSSプロパティで使用することができます。
参考:CSS – initial
min-widthを初期値に戻す際は基本はinitialを使用し、
auto はinitialが効かないIEの為に記述します。(IE、またお前か…)