問題発生
状態:-
閲覧数:2,299
投稿日:2017-10-29
更新日:2017-10-29
スマホ実機で確認したら、特定ページだけナビゲーションが表示されない
・どうやら、該当ページだけ横幅が大きくなっているようだ
・調査するも原因不明
Chrome「デベロッパーツール」でモバイル表示
・怪しいと思った要素を、正常表示されるまで削除し続けていく
・ 具体的には、[Elements] パネル経由で、「Delete element」実行
・どうやら、該当ページだけ横幅が大きくなっているようだ
・調査するも原因不明
対応
Chrome「デベロッパーツール」でモバイル表示
・怪しいと思った要素を、正常表示されるまで削除し続けていく
・ 具体的には、[Elements] パネル経由で、「Delete element」実行
原因判明例
article hr {
//中略
width: 50rem;
text-align: left;
display: inline-block;
対応例
article hr {
//中略
width: 90%;
text-align: center;
display: block;
ボタンクリック出来ない → 「display-inline;」を「display:inline-block;」へ変更
「transform:translate3d();」でスマホ実機画面が一瞬だけチラつく → 「backface-visibility:hidden;」指定すると解消される