Iphoneで横スクロールがでてしまう。

PR 2015/2/5

このトピックには5件の返信、2人の参加者があり、最後にわいひらにより11年、 2ヶ月前に更新されました。

5件の返信スレッドを表示中

投稿者

投稿
- 2015年2月5日 2:38 PM #19576
  
  daidora
  ゲスト
  
  いつもお世話になっております。
  
  iPhone5で閲覧すると、画像がはみ出して横にスクロールしています。
  もともと別のテーマ（Stinger5）で作っていたブログなのですが,
  PageSpeed Insightで確認すると
  
  ページコンテンツの幅は 334 CSS ピクセルですが、表示域の幅は 320 CSS ピクセルしかありません。次の要素が表示域から外れています:
  
  とでています。どのページも何かしらの画像がはみ出てしまいます。
  何とか回避する方法はありませんでしょうか？
  
  現在はレスポンシブではありません。
- 2015年2月5日 3:06 PM #19593
  
  わいひら
  キーマスター
  
  当サイトも、横スクロールバーが出ますでしょうか？
  出る場合は、該当ページのURLを教えてください。不具合を修正したいと思います。
  
  もし、当サイトで横スクロールバーが出ないようなら、コンテンツか、カスタマイズか何かに問題があるのではないかと思います。
  もし、コンテンツかカスタマイズに原因がある場合、不具合の出ているページのURLがないとちょっと原因はわからないです。
- 2015年2月5日 3:42 PM #19606
  
  daidora
  ゲスト
  
  わいひら様
  
  いつもありがとうございます。simplicityのトップページ、記事ページ共に横スクロールはありません。
  
  私のサイトでもTOPはページはでません。先ほど検証して画像が原因のようだとわかりました。
  
  文字だけの投稿では横スクロールは出ず、画像を入れるとでます。
  
  もともとStinger5では出ていなかったのですが、simplicityに変えてから出るようになりました。
  
  画像は自動でスマートホンのCSS幅に縮小されると思っていたのですが、設定などあるのでしょうか？
  
  該当ページはこちらになります（このページだけでなく過去のページ全てで同じ現象です）
  
  http://gomalog.matrix.jp/gomalog/post-3582-3582
  
  何かアドバイスいただけたら幸いです。
- 2015年2月5日 6:02 PM #19627
  わいひら
  キーマスター
  URL＆Simplicityの紹介ありがとうございます。
  原因がわかりました。
  画像の、右寄せ（左寄せ）スタイル（img.alignright）が悪さをしていたようです。
  
  僕は、画像を寄せたスタイルは使用してなかったので、不具合に気づいてなかったようです。
  
  手元の環境では、修正したので次回のバージョンアップで改善されるかと思います。
  
  すぐに修正するには、「css/narrow.css」の以下の部分のコメントを外してみてください。
```
@media screen and (max-width:639px){
/*  img{
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }*/
```
  もしうまくいかなかった場合は、教えていただけると幸いです。
- 2015年2月5日 8:09 PM #19656
  
  daidora
  ゲスト
  
  わいひら様
  
  ありがとうございました。ばっちり直りました。
  
  お忙しい中、こんなにもの早く対応策をアドバイスしていただけた感謝感激です。
  
  ありがとうございました。
  
  今後およろしくお願いいたします。
  
  だいどら
- 2015年2月5日 8:21 PM #19660
  
  わいひら
  キーマスター
  
  先程、修正箇所を含めてバージョンアップしたので、よろしかったら試してみてください。
投稿者

投稿