勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

スマホサイトでviewportを指定しても横スクロールバーが表示される

   2024/02/25  CSS

スマホ用のサイトで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でユーザーエージェントを変更して、ブラウザ幅を最小にしても横スクロールは出ないのに、スマホでだけ出るってのがよく分からない。

 

参考サイト

http://index-japan.jp/?p=2280

 - CSS

  関連記事

Bootstrap5系でよく使う要素及びClass名のまとめ記事

サンプルページやダッシュボード系のページを組む際にBootstrapを使うことが ...

CSSのpointer-eventsプロパティで指定した要素をクリック不可にする方法

ページ内の指定のボタンをクリックしても動作しないという症状が発生し、ソースコード ...

jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...

「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法

「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...

要素の表示or非表示

今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...