WEBサイトの製作、管理、とかの日記ブログです。

<<   2019年04月   >>
SunMonTueWedThuFriSat
 123456
78910111213
14151617181920
21222324252627
282930    
新着記事
カテゴリ
過去ログ
コメント
検索
CSS Media Queries と スクロールバー
ブログサービスにCSS Media Queriesを使ったカラム数可変の公式テンプレートを作ってて気づいたんだが、
Media QueriesのwidthとかheightでCSSを変化させて、その際にスクロールバーの有無が変化した場合どうなるんだ?
って疑問がわいた。

スクロールバー分で変化しないなら問題ないんだが、スクロールバーのサイズでMedia Queriesのwidthとかの値が変わってしまうと

Media QueriesでCSSを切り替えて、その際にスクロールバーの有無が変化し、
それによってMedia Queriesの結果が変わり、無限ループでブラウザが死ぬ可能性がある。


調べたところ、
「スクロールバーを含むサイズ」
らしい。
ただ、Webkit系ブラウザはバグでスクロールバー有無でサイズが変化してしまうみたい。

Media Queriesを使わずにJavaScriptでresizeイベントによって同じ様にCSSやレイアウトを切り替えることもできるが、
スクロールバーの有無の変化考慮しないと危険だね。
というか、JavaScriptでwindowサイズによるレイアウト切り替えは多分やらんほうがいい。

この記事へのコメント
名前:
URL
コメント:
この記事へのトラックバック :
whblog 1.7