frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

iphoneX対応サイトの実装方法・注意点まとめ html・css

スポンサードリンク


スポンサードリンク


近く実装案件も出てくるであろうiPhone Xの実装方法、注意点の記事をまとめました。
主に表示領域に対して処理を加えなければいけなくなりそうです。

iPhone X の Safari における Web コンテンツの表示

medium.com

<meta name="viewport" content="viewport-fit=cover">

viewport にこの値を設定することで、Safari の表示領域をフルスクリーンに設定できるようになる

constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)
safe-area-inset-*が示すとおり、上述のアプリのタッチイベントを認める領域である Safe Area が Safari の表示領域のどのくらい内側に存在するかを示す値です。

iPhone Xのモックアップ素材まとめ

www.nxworld.net

毎回新しいApple製品が発表された直後から様々なところでモックアップ素材を作成して配布しているのを見かけますが、先日発表されたiPhone Xも既に多数のモックアップ素材が配布されていたので、それらの中から目に付いたものをまとめました。

coliss.com

販売予約は、10月27日からでまだ少し先ですが、一足早く、iPhone XとiOS 11を楽しめるモックアップ素材とUIデザイン素材を紹介します。

iPhone X対応におけるデザイン上の注意ポイント

iPhone X対応におけるデザイン上の注意ポイント | fladdict

画面サイズ
サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。

機能的な対応そのものはautolayoutとかちゃんとやってれば動くだろうけど、UIとしての全体整合性がそろそろ。
どうするか悩ましいけど、市場規模が読めないので、総括としては各プレイヤー最低限の対応で逃げそう。このためiPhone Xのポテンシャルを発揮できるアプリは、体力のあるビッグプレイヤーに制限されそう。