楽天市場 Gold スマートフォンサイト

Question

いつもお世話になっております。スマートフォンサイトを下記のページにて制作しています。https://www.rakuten.ne.jp/gold/toyamawebshop/sp/ぱっと見は正常に見えるのですが、iphoneなどで指で左右に動かすことができてしまいます。有名な八代目儀兵衛さんのサイトを見ると、左右にぐらつきません。https://www.rakuten.ne.jp/gold/gihee/sp/また、右に動かしたときに若干空白が・・・margin,padding,border等が原因かと思うのですが、試行錯誤してもなかなか思ったように動作してくれません。細かい点で申し訳ないですが、よろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。スマートフォンサイトを確認したところ、店舗内検索窓のキーワード入力欄にて、「width:100%;」が設定されていることが原因でした。iOSのSafariでは、要素に内部で自動的にpaddingを設定するため、下記ページにて説明されている通りの事態が発生してしまいます。https://allabout.co.jp/gm/gc/443954/対策方法につきましても、ページにて説明されております通り、キーワード入力欄に適用させるスタイルシートにbox-sizing: border-box;を追加していただければ結構です。（ベンダープレフィックスは必要ありません）なお、ご質問いただいた内容とは関係ありませんが、ページ全体を囲むに、overflow: hidden;が設定されておりました。ブラウザによっては、画面の縦幅がタグの縦幅と認識された結果、画面がスクロールできなくなる、という可能性がございますので、特に必要がなければ、削除していただくことをオススメします。

Answer

毎度細かい点にお答えいただきありがとうございます！無事解決いたしました！

楽天市場 Gold スマートフォンサイト

カテゴリーから探す