スマホサイトで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

: jQueryとCSSの連携

$(function(){ $("#change_small").click(f ...

: CSSでスタイルの優先

1つのファイルに対して複数スタイルが指定されている、ということがたまにある。 ...

: 可変要素内の文字を丸める

可変の要素内の文字を丸めたかった。いつもであればPHPのmb_strimwidt ...

: デザイン等のカラーの組み合わせを簡単に決める方法

サイト作成時にメインカラーとそれにマッチする組み合わせを考える必要があった。デザ ...

: スクロールしても追尾する要素をCSSで作成

コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前にMeeka ...

: CSSのopacity

opacityというプロパティを業務中に見かけたのでメモ。透明度を指定するもの ...

: Bootstrapを使用したデザインテンプレート

Bootstrapを使用してもデザインのセンス無いし、と思っていいものはないか ...

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

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

: CSSのセレクタを一瞬で拾ってくる

↓↓こちらのサイト様 http://css.miugle.info/ 左側のテキ ...

: CSSでfloatの解除

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

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

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

関連記事