質問: mobilelayouterでの確認の仕方 いつもお世話になっております。spページの表示確認の方法についてご指導くださいませ。https://hanatuduki.shop-pro.jp/?pid=135870211こちらのページで表示の確認しているのですがmobilelayouterで縦表示(iphone 5s)の表示とgoogle chromeのf12キーでのスマートフォン表示が違うのですがどちらがより正しい表示のされ方でしょうか?添付させて頂いたように、mobilelayouterでは右が見切れてしまいますがgoogle chromeでは見切れなく表示されます。自分自身がスマホを持っておらず確認ができません。よろしくお願いいたします。
回答: ecマスターズの田中です。> どちらがより正しい表示のされ方でしょうか?見切れている方が、正しい表示のされ方となっております。各iphoneのブラウザの横幅はiphone 5系以前・seでは320px、iphone6/7/8系では375pxとなっているのですが、いただいた商品ページの商品説明ではのように、ブラウザの横幅を超える数値が設定されているためにはみ出してしまうようになっております。スマートフォンを意識してご記載される際は、横幅に原則固定値を使わず、100%などの割合でご指定いただくよう心がけていただければと思います。割合を使うとpcで横幅が拡がりすぎる、などの問題が発生した場合はスタイルシートを利用しての設定が必要となります。ちなみに、私の環境では、google chromeのf12キーでのスマートフォン表示でも同様にはみ出る結果となっております。おそらく、ハナツヅキさんの環境ではスマートフォン表示にしても、ブラウザの表示部分はウィンドウいっぱいに拡がっているのではないかと思うのですが、ブラウザの上にある、左に記載されている文字をクリックして「iphone 5/se」「iphone 6/7/8」などをご選択いただくことで、mobilelayouterと同様に、はみ出る表示になるのではないかと思います。なお、mobilelayouterやchromeのスマートフォン表示でも、どうしてもiphone実機とは異なる表示となる部分がございますので、もし可能であれば、確認用の実機もご用意いただければ幸いです。