NEXUS 5Xで閲覧すると、変な余白が現れる

Question

あるレスポンシブのホームページをNEXUS 5Xで閲覧すると、ある場所に余白が現れます。

パソコン上でブラウザを縮めた時や、他のスマホ機種で閲覧すると現れません。
クロームのデベロッパーツールで見てもマージンは設定されていません。

実際にホームページをお見せできればいいのですが、お見せできず・・・
何か考えられる原因ありますでしょうか？

nexus5xの閲覧状態でデベロッパーツールが見れれば、自分でもなんとかなるかと思ったのですが、nexusでは見れず・・・。

ギブアップ状態です。よろしくお願い致します。

Answer 1

余白の入り方がわからないので、参考程度に聞き流していただければいいのですが、
androidのブラウザでは、要素の背景色がスタイルで設定されていない場合に、
文字列が横幅に余裕があるにも関わらず、デバイス本来のwidthで改行されたりする場合があります。
これは、transparentを指定してもダメでカラーコードをちゃんと指定しないとダメなようです。

質問者様の言う現象とマッチしているかどうか分かりませんが、
手がかりになれば幸です。

Comments

[退会済みユーザー]

返信いただき、ありがとうございます。

再度確認したところ、NEXUS5XのFIREFOXでは現象が発生しておらず、
NEXUS5Xのクロームでのみ現象が発生していました。

IEとFIREFOX（クローム）で余白の動作が変わるというのは聞いたことがあるのですが、
FIREFOXとクロームで余白の動作が変わることはありえるんでしょうか・・・。

[Cf_cwd]

＞FIREFOXとクロームで余白の動作が変わること
ありえます。
(widthやheightの指定で解釈などが異なれば)

大体のWeb制作会社がこういった差異を可能な限りなくすために自社用のリセットCSSを作成し使用しているか、ライブラリ化されたCSSを用いています。
これは制作効率を上げる、またバグを減らす工夫ですね。

displayの指定や要素の範囲などを確認してみてはどうでしょうか？

またある場所という言い方では回答者がエスパーするにしてもあまりに抽象的すぎますので、出る場所が上下左右どう出るのかや周辺の要素にかかっているCSSなどを書いておいた方がいいかと思われます。
(margin、padding、background、display、position、floatなど)

もしくはコンテンツをダミーに置き換えた、現象が再現できるコードをCodePenに上げるなどするといいでしょう。
回答者が実際にコードを見ることができれば回答の集まりも良くなるでしょうから。