勉強したことのメモ

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

  関連記事

IE11でSB Admin2のログインページの表示がおかしい

ダッシュボードや管理画面を作成する際、SB Admin2を使うことが多い。ダッシ ...

jQuery無しで要素にアニメーション効果を設定する方法(animate.css)

あるサイトをWappalyzerで調査していた際に「animate.css」とい ...

CSSのdisplayについて

よく使うdisplayだけれども、noneとblock以外で 初めて使うことがあ ...

特定のID / Classを持つタグの親要素に対してCSSを割り当てる方法

特定のID / Classを持つタグの親要素に対してCSSを割り当てたい。また、 ...

要素の表示or非表示

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