スマホサイトでviewportを指定しても横スクロールバーが表示される
2024/02/25
スマホ用のサイトでviewportが指定されており、widthも100%になっているのに横スクロールバーが出るケースがあった。原因はよく分からないんだけど、以下スタイルを追記する事で解決できた。
ソースコード
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
PCでユーザーエージェントを変更して、ブラウザ幅を最小にしても横スクロールは出ないのに、スマホでだけ出るってのがよく分からない。
参考サイト
関連記事
-
-
tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法
tableのtd内にcheckboxを設置し、td部分をクリックすることでche ...
-
-
セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法
セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQu ...
-
-
スクロールしても追尾する要素をプラグイン等は利用せずCSSのみで作成する方法
コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前にMeeka ...
-
-
CSSで一つの要素に対して複数の背景色を指定する方法
1つのdiv要素に対して複数の背景色をつけたかった。background-col ...
-
-
CSSでカラーコード等を変数(カスタムプロパティ)として使用する方法
他社が作成されたCSSのソースコードを拝見していると、背景等の色を指定する部分に ...