レスポンシブ時はみでる・・・よくある原因

レスポンシブズレ

レスポンシブデザインで制作されたサイトで、基本はPCでみていますがスマホ(iphone,android)でたまに見てみると、変なスクロールバーがでてる・・・下へ送るとサイドにずれたりする・・・
なんてことがあります。(あるんです)
これは大体、

  • 1.余白(padding)や空白(margin)を多くとってあり画面サイズに収まっていない
  • 2.youtubeや大きな画像、広告などを使用し横幅がピクセル指定になっていて幅をオーバーしその分はみ出してしまう

が考えられます。
それを防ぐためにCSSで指定しておくと、納めることができます。
body iframe{width:100%;height:auto;}
body img{width:100%;height:auto;}
bodyタグの中にあるiframeやimgの幅を与えているのですが、実際はbodyよりもっとピンポイントに指定することになります。
.クラス名 iframe{width:100%;height:auto;}
とか
#id名 .クラス名 img{width:100%;height:auto;}
とかになります。
画像やiframe(インラインフレーム)は良いのですが、やっかいなのが空白&余白です。
これはCSSの制作者によってどんな書き方をしているかもあり、答えが見つけづらいです。
padding:12px;(余白上下左右12ピクセルあける)という人もいますし、padding:2%;(パーセント指定する人もいます)
lopweb.netでは以前は%指定でしたが、現在は一部em指定をしています・・・。
絶対指定と相対指定があり混合したりするとさらにややこしくなりますね。
はみ出る話にもどすと、width:100%; padding:2%;とすると横幅104%になりはみ出るということです。
きっちり収めてスクロールバーを出ないようにするにははみ出ないように計算し、どこが影響しているのか探す作業になります。
lopweb.netでは、
width:96%;padding:2%;
と書いたりしています。
制作者側によってまちまちな仕様のCSSを探りながら修正です・・・