Chromeデベロッパーツールでスマホ表示チェックする際の注意点。|デザイナー、コーチ、ディレクターズメモ|井川

igawa design.

Memo

Chrome デベロッパーツールでスマホ表示確認時の注意点。

デベロッパーツールのショートカット。

デベロッパーツールは右クリックからも開けるが、よく使う機能なのでショートカットで覚えておくと作業がはかどる。

ショートカット
  • Mac: 「Command」 + 「Option」 + 「i」(FirefoxやSafariでも同じ。)
  • Win: 「Ctrl」 + Shift「」 + 「i」 (「F12」でも可。)

で開いたり閉じたりできる。


デベロッパーツールとiPhoneのフォーム関連の表示は異なる。

iPhoneのiOSのSafariでは「input」や「button」タグなどの表示がデフォルトのCSSで用意されているので、これをリセットしておかなければ思ってもいない表示となる。

そのためリセット用やフォーム用などのCSSファイルで、「appearance」を無効にしておかなければいけない。

CSS

例)

この例では、「border」や「outline」もまとめてnoneにしている。

input, select, textarea, button {
 -webkit-appearance: none;
 appearance: none;
 border: none;
 outline: none;
}

Chromeのデベロッパーツールと、iPhoneのSafariのテキスト表示は一致しない。

またフォーム関連以外でも、意図せずテキストが改行される、ということが結構ある。

これはかなり以前、Chrome登場前のFirefoxのFirebugプラグインやその他エミュレータでも起きていたことで、いまでもフォントや文字間隔を頑張って調整してもなかなか完全には一致しない。

なのでスマホの実機確認はまだまだ必要だろう。

Chrome デベロッパーツールでスマホ表示確認時の注意点。


スマホのアドレスバーの縦幅は考慮されていない。

サイトのデザインでフルスクリーンにしたい場合も良くある。その場合は、CSSで高さに100vhを指定すれば全画面表示となる。

ただし全画面にしたい場合で、かつロゴやテキストなどを上下左右にセンタリングしたいときは、デベロッパーツールのエミュレータでは問題ないが、実機ではアドレスバー分ズレる、ということが起きる。

そういう際には、ちょっと面倒だが、例えば以下のようなコードで対応できる。

HTML

例)

<section>
 <div class="logo">
  <p><a href="index.html"><img alt="ロゴ" width="200" height="200" loading="lazy" src="xxxxx.png"></a></p>
 </div><!--logo-->
</section>
CSS

例)

section {
 position: relative;
 min-height: 100vh;
 min-height: calc(var(--vh, 1vh) * 100);
 overflow: hidden;
 width: 100%;
 height: 100vh;
}
section .logo {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
JS

例)

function setHeight() {
 let vh = window.innerHeight * 0.01;
 document.documentElement.style.setProperty('--vh', `${vh}px`);
}

setHeight();

window.addEventListener('resize', setHeight);
表示。

例)

Chromeのデベロッパーツール。iPhone.
svh、lvh、dvh

未検証だが、2022年3月以降では「svh、lvh、dvh」では可能なのかもしれない。

参考サイト:iOS Safariの100vh問題を解決するための単位【svh, lvh, dvh】 │ Webty Staff Blog さま

WebKitサイト:New WebKit Features in Safari 15.4 | WebKit


Safe Area問題。

iPhone X以降のモデルではSafe Areaの問題もある。スマホの画面がChromeのデベロッパーツールのように直角の長方形ではなく、ノッチがあったり、角が丸くなっていたりするのだ。

その場合、Safe Areaの外の角丸領域をカバーしたい場合は、meta要素に「viewport-fit=cover」の指定する必要がある。

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

iPhoneのSafe Area。

画像引用:Layout Guide, Margins, Insets and Safe Area demystified on iOS 10 & 11
Killian THORON さま


viewport-fit=coverなしの場合。

左右に意図しない白い余白ができる。

iPhoneの左右の余白問題。

viewport-fit=coverありの場合。

左右の余白がカバーされる。

iPhoneの左右の余白問題。

画像引用:Removing the White Bars in Safari on iPhone X
Stephen Radford さま

参考:iPhone XのSafariで表示される謎の空白を消す方法 – Qiita
Daisuke Oda さま

iOSのChromeはカバーされないが、シェア率が低く、スマホを横にしてサイトを見るユーザーは少ないので、プログレッシブエンハンスメント的に割り切る。

Chromeのデベロッパーツールを開くショートカット。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお客さま対応のみでの利用とさせていただいております。
    • 社会的に正当な理由、法に基づいた理由がない限り、第三者へ開示することはありません。