iPhoneXのUAと出っ張り対応メモ。レスポンシブサイトは要注意。
iPhoneⅩの出っ張りを対応するときはレスポンシブのブレイクポイントに注意
最終更新日:2018年3月8日
PhoneⅩは縦横比19.5:9と超縦長。
しかも変な出っ張りがある。
サイトの注意点と改修方法をメモ。
iPhoneⅩ出っ張りの余白対応
iPhoneⅩは、カメラやセンサー部分の出っ張りがあります。
デフォルトの設定では、WEBサイトの表示がこの出っ張りに隠れないように余白ができます。
余白部分はbody要素のbackground-colorで設定できます。
もしbackground-colorの設定がなければ、transparentになります。
一般的なウェブブラウザは背景色が白になっているので、白になります。
※ごく一部のブラウザや、アプリ内にサイトを表示する場合は、全体の背景色が白ではなくグレー等で表示されることがあります。
iPhoneⅩに関係なく、bodyのbackground-colorは白(#fff)を指定しておいたほうがいいです。
もし、サイト内の背景色が1色で、横幅いっぱいで違う背景色を使ったエリアがないのであれば、bodyのbackgound-colorだけで解決します。
ですがそのようなサイトは、あまりないでしょう。
余白が気に入らないのであれば、viewportにviewport-fit=coverをつけることで、端末いっぱいに表示されるようになります。
- viewport-fit=cover
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
これだけで、横幅一杯に表示されるようになります。
ですが、当然出っ張りに隠れてしまうコンテンツが出てきます。
その場合は、各コンテンツのCSSを調整します。
safe-area-inset-top
safe-area-inset-right
safe-area-inset-left
safe-area-inset-bottom
というCSSの値が使えます。
例えば、headerに余白を持たせるなら
- CSSで調整
-
header { padding-rihgt: safe-area-inset-right; padding-left: safe-area-inset-left; }
のようにすることで、出っ張りの内側に表示されます。 出っ張りをピクセル指定しなくてもOKです。
absoluteのコンテンツであれば、例えば
- CSSで調整 absolute
-
header { position: absolute; right: 10px; rihgt: safe-area-inset-right; }
これで大丈夫。
rightが2回設定されていますが、「 safe-area-inset」が関係ないときはその上の設定が適用されます。
レスポンシブサイトは要注意
「viewport-fit=cover」を使うと、横幅が変わります。
「window.innerWidth」は、余白ありのデフォルト状態だと「724px」、
「viewport-fit=cover」を使うと、「812px」になります。
今までは、PC・タブレットとSPを分ける横幅として「768px」が一般的でした。
767pxまでがSP、768pxからはPCまたはタブレット。
iPhoneⅩの登場で、上記の通り余白なしだと「812px」なのにスマホ表示となってしまいました。
- レスポンシブCSSのブレイクポイント
-
<link href="/PC用CSS" media="(min-width:768px)" rel="stylesheet"> <link href="/SP用CSS" media="(max-width:767px)" rel="stylesheet">
今後は、ブレイクポイントの設定を812pxに変えるか、JSで対応する必要があります。
もし812pxまでをスマホ、813pxからをPC・タブレットにするのであれば、とても古いタブレットはスマホ表示となるでしょう。
JavaScriptで対応するのであれば、768px以上のスマホはviewportを767pxに固定させるスクリプトを書く事になります。
例えばこんな感じ。
- viewport上書きscript
-
import parser from "ua-parser-js"; const ua = new parser(navigator.userAgent); if(ua.getDevice().type === "mobile") { if(window.innerWidth > 767) { $("meta[name=viewport]").attr("content", "width=767, viewport-fit=cover"); } }
※ES6 + 「ua-parser-js」使用。
実装するならこれに、端末縦の時の記述を追加して、向きが変わるたびに発火させる。
iPhoneⅩのUA(useragent)
おまけで、iPhoneⅩのuseragent(Xcodeのシミュレーターから)
- iPhoneⅩのUA
-
Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1