4

ウェブサイトを開発していますが、
表示されるHTMLの幅が、実際のブラウザのサイズよりも小さいサイズで表示されるため困っています。

Chrome(問題が発生)
Safari(問題なし)

Chrome と Safari でキャプチャをとりました。
Chrome では定規のサイズと実際のブラウザサイズが異なっています。
Safari ではウィンドウのサイズと body 要素の width が同じなので問題なしです。

以下のブラウザで、上記の現象が起こります。

・Google Chrome v40.0.2214.115
・Fire Fox 33.0.2

※ Safariは実際のブラウザのサイズで表示されています。

OSは、Mac OSX 10.9.5
ディスプレイの解像度は、1680x1050 です。

画像をブラウザで直接開いた場合は、
この現象は起こりません。

ブラウザやOSのズーム機能は使っていません。

何が原因か全くわからないため、
アドバイスお願いします。

2
  • 例示しているページのURLと、Safariでの画面キャプチャを質問に貼っていただけないでしょうか。またその現象はどのWebサイトでも発生しますか?
    – unarist
    Commented 2015年2月27日 14:32
  • ありがとうございます。 キャプチャに使ったサイトは Bootstrap です。 Safari の画面キャプチャも撮りましたが、コメント欄には貼付けられないので、質問を編集してみられるようにしますね。 いいえ、今確認した限りですが、 Qiita や Evernote は大丈夫でした。 Bootstrap や開発中のサイトは依然発生します。 ちなみに開発中のサイトでは Bootstrap は使用していません。
    – morimasa
    Commented 2015年3月2日 4:05

2 件の回答 2

5
+50

画像を見てみると右上の三本線アイコンの幅が上25px・下22pxと異なります。
これは数値で表示されている400pxとルーラーから読み取れる値の365pxの比率とほぼ同じであるので、上のブラウザの表示倍率がやや上がっており、横幅の数値には反映されていないのだと思います。

2
  • キャプチャにも虫眼鏡アイコンが表示されているので証拠と言えますね。
    – hinaloe
    Commented 2015年3月4日 8:19
  • コメントありがとうございます! Chromの拡大機能のリセットを何回か行って解決せず、投稿を行ったのですが、コメントを頂き、これはと思い、Chromの再起動やパソコンの再起動を行ったところ、実際のサイズへの変更ができました! 本当にお騒がせしました!ありがとうございます!!!
    – morimasa
    Commented 2015年3月5日 3:28
3

私もpgrho氏の言う通りかと思います。
検証のため画像を貼るために回答として投稿します。

初めに、ルーラーを上下反転させてみました。
本来であれば、10ピクセル単位で均等になるはずなのでメモリが上下一致するはずです。
ルーラーが不一致
ご覧のとおりルーラーを反転させても一致していません。
一致していないということは、等倍表示ではないことになります。

ルーラー101px分
次に、ルーラー100~200、つまり101ピクセル分取り出しました。
しかし、111pxとなり、これもまた等倍ではないことを意味しています。

等倍表示にしてからもう一度ご確認いただいたほうがよいかもしれません。

1
  • 画像ありがとうございます! 私のブラウザが間違いなく悪いと判断できました! 説明もとてもわかりやすかったです。 また、ルーラーの反転の検証方法などとても勉強になりました! お騒がせしました!ありがとうございます!!
    – morimasa
    Commented 2015年3月5日 3:32

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。