MobileLayouterでの確認の仕方

Question

いつもお世話になっております。
ｓｐページの表示確認の方法についてご指導くださいませ。

https://hanatuduki.shop-pro.jp/?pid=135870211
こちらのページで表示の確認しているのですが
MobileLayouterで縦表示（iphone 5s）の表示と
Google ChromeのＦ12キーでのスマートフォン表示が違うのですが
どちらがより正しい表示のされ方でしょうか？

添付させて頂いたように、MobileLayouterでは右が見切れてしまいますが
Google Chromeでは見切れなく表示されます。

自分自身がスマホを持っておらず確認ができません。

よろしくお願いいたします。###HR######IMG02316f6ad6478c308cca59119dbcbe706.jpegIMG0###

Answer

ECマスターズの田中です。

> どちらがより正しい表示のされ方でしょうか？

見切れている方が、正しい表示のされ方となっております。

各iPhoneのブラウザの横幅は
iPhone 5系以前・SEでは320px、iPhone6/7/8系では375pxと
なっているのですが、

いただいた商品ページの商品説明では

のように、ブラウザの横幅を超える数値が設定されているために
はみ出してしまうようになっております。

スマートフォンを意識してご記載される際は、
横幅に原則固定値を使わず、100%などの割合でご指定いただくよう
心がけていただければと思います。
割合を使うとPCで横幅が拡がりすぎる、などの問題が発生した場合は
スタイルシートを利用しての設定が必要となります。

ちなみに、私の環境では、
Google ChromeのＦ12キーでのスマートフォン表示でも
同様にはみ出る結果となっております。

おそらく、ハナツヅキさんの環境では
スマートフォン表示にしても、ブラウザの表示部分は
ウィンドウいっぱいに拡がっているのではないかと思うのですが、
ブラウザの上にある、左に記載されている文字をクリックして
「iPhone 5/SE」「iPhone 6/7/8」などをご選択いただくことで、
MobileLayouterと同様に、はみ出る表示になるのではないかと思います。

なお、MobileLayouterやChromeのスマートフォン表示でも、
どうしてもiPhone実機とは異なる表示となる部分がございますので、
もし可能であれば、確認用の実機もご用意いただければ幸いです。

Answer

田中様
ご回答ありが有難う御座います。

商品ページの作製はＨＰビルダーで
枠（非表示・横を490に設定）を使って枠内に文言を記載しております。
ご指摘のように

横幅に原則固定値を使わず、100%などの割合でご指定いただくよう
心がけていただければと思います。

これはどのように設定すれば宜しいでしょうか？
スタイルシートの使い方がいまいち理解しておりません。

申し訳御座いませんが、ご指導お願いいたします。

Answer

ECマスターズの田中です。

> これはどのように設定すれば宜しいでしょうか？

それでは一度、
ＨＰビルダー上に作成した枠の横幅を
490から100%に変更した上で文言を記載するか、
ＨＰビルダーから商品ページにソースを移す際に
枠の中身だけをご記載いただくか、
どちらかの方法をお試しいただきますようお願いします。
（今回の手順では、スタイルシートの調整は必要ございません）

Answer

田中様

有難う御座います。
後ほど試してみます。

490から100%に変更した上で文言を記載するか、
こちらは表の属性内の表の幅をページ幅に合わせるにチェックを入れれば宜しいのでしょうか？

よろしくお願いいたします。

Answer

ECマスターズの田中です。

> 表の属性内の表の幅をページ幅に合わせるにチェックを入れれば宜しいのでしょうか？
はい、そのように操作していただきますようお願いします。

Answer

田中様
いつもご指導有難うございます。
表の修正をしてみます。

有難う御座いました。