前提・実現したいこと
どのスマートフォンで見ても375pxで表示されるようなサイトを制作しています。
そのためmetaタグに対して以下を設定しています。
ソースコード
<meta name="viewport" content="width=375,user-scalable=no">
発生している問題
GoogleChromeのデバッグツールでスマホサイズにしたところ、
iPhone5/SEのみ適用されず、右に大きくずれてしまいます。
また、android 4.2の実機で確認したところ、
こちらでも同じ現象がおきました。
ボックスモデルを上から順番に確認してみましたが、375pxを超えるものは
特に見当たりませんでした。
試したこと
cssでhtml,bodyに対してwidth:375px overflow-x: hidden
または、max-width:375px width:100% overflow-x:hidden
metaタグにtarget-densitydpi=device-dpiの追加
今まで何個かwebサイトを作ってきたことはありますが、
このようなエラーに遭遇したことがなかったので、なかなか
解決できずに困っています。
解消をご存知の方、よろしければご教授ください。
足りない情報があれば逐一追加していきます。