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

2015/09/04

スマホ用のサイトで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;
}

* {

-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

: フォームCSS

body { font-family : 'メイリオ',Meiryo,'ＭＳＰ ...

: formのsubmitをボタンを無くしたり画像をつけたりCSSで装飾

aタグになっていたところをsubmitボタンに変えてほしいという修正依頼があった ...

: CSSでfloatの解除

CSSでfloatがかかっているところを解除したかったけど、やり方が分からなか ...

: 特定のブラウザのみCSS指定

FireFoxだけどうにもデザインが崩れる、ただ他のブラウザでは希望通りのデザ ...

: CSSでマウスカーソルの変更

マウスカーソルはCSSで任意に決められるみたい。リンク時に一律させた方がよいと ...

: CSSでプロパティの初期化

CSSでmedia screen and等を指定し、特定の場合のみプロパティの無 ...

: ガラケー(特にdocomo)でのCSS

PCサイトだとIEでつまずくことが多いけど、ガラケーはdocomoが難儀やよ、 ...

: ダウンロード無しで外部ファイル呼び出し

■jQuery http://scriptsrc.net/ ■bootstrap ...

: LINE風のふきだしデザイン

LINE風のふきだしデザインでページを作ってほしいと言われた。 CSSはあまり理 ...

: CSSのdisplayについて

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

PREV: PHPの配列をファイルに保存してPHPやJSで呼び出す
NEXT: DTIのServersMan@VPSでデータが全て消えた

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

関連記事