上記のサイトはレスポンシブ・ウェブ・デザイン対応にしたのに、ふとしたきっかけで横スクロールが発生してしまうことがわかりました。
パソコンでサイト表示させてブラウザの横幅を狭めたときに横スクロールが発生してました。横スクロールが出ないようにしたはずなのに...。
こちらのサイト[http://gourmetvox.com]では横スクロールは発生しません。同じ設定にしてあるはずなのに...。
設定が間違っているなということで見直してみました。
確認してみるとhttp://www.heartbeat.infoは、下記のようになっていました。
HTMLファイルのviewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
レスポンシブ用のCSSファイル
/* ■■■横幅800px以下ここから■■■ */
@media (max-width:800px)
{
スタイルシートの設定
}
スタイルシートのメディア・クエリーを使ったブレーク・ポイントが800pxになっていました。ちなみにviewportのwidthはdevice-widthを設定してあります。
Heartbeat.infoの横幅は1000pxです。上記のようにブレーク・ポイントが設定してあると横幅が800px以下にならないとレスポンシブ用のスタイルは適用されません。そのため、ブラウザの横幅を狭めても幅が1000pxから801pxまではPC用のスタイルシートのままなので横スクロールが発生してしまいます。
作っていた時に気がつかなかったのは、この800px以下用のスタイルシートのチェックはiPad miniでしか確認していなかったからですね。iPad miniの解像度は縦×横が1,024 x 768ピクセルとなっています。ポートレイト方向では768pxなので800px以下用のスタイルシートが適用され、ランドスケープでは横の解像度が1024pxなのでPC用のスタイルシートが適用されても問題なく表示されていました。
まぁ、パソコンではわざわざ横幅を狭めて見ることはないからいいじゃんと思ってしまいますが、もし、横幅が900pxのデバイスだったらレスポンシブ用のスタイルシートが適用されません。
で、解決方法としてはメディア・クエリーで設定してある「@media (max-width:800px)」を「@media (max-width:1000px)」にするだけ。こうすることでディスプレー（ブラウザ）の横幅が1000px以下になれば、必ずタブレット用のスタイルシートが適応されるのでスクロールは発生しなくなります。
また、WEBサイトの横幅とブレーク・ポイントを同じ値にしておけば、viewportのwidthをdevice-widthにしてある場合でも、タブレットなどで横スクロールが発生しなくなりますよね。
これはviewportのwidthにピクセルで数値を設定した場合、その数値と同じ数値をブレーク・ポイントに設定してあるのと同じことですよね...。とりあえず、横スクロールは発生しなくなりました。
と、つらつらと書いてきましたが、イマイチ腑に落ちないところがあってモヤモヤしてる。またいずれ検証だな。viewportの仕様とか、きちんと理解しないと。