Apple、「iPhone X」向けWebサイトのデザイン方法をWeb開発者に公開。

スポンサーリンク

 Appleが「iPhone X」向けWebサイトのデザイン方法をWeb開発者に公開しています。詳細は以下から。

iPhone Xのアイコン

 AppleおよびWebKit開発チームは現地時間2017年09月22日、日本時間2017年11月03日から発売が開始されるEdge-to-Edgeディスプレイを搭載した「iPhone X」向けのWebサイトをデザインするためのポイントをまとめた記事をWebKit公式ブログで公開しています。

Sep 22, 2017 by Timothy Horton
Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor housing.

Designing Websites for iPhone X – WebKit

 AppleがiPhone Xの発表と同時に公開した”Human Interface Guidelines“や”Designing for iPhone X“によると、iPhone Xには新たにタッチイベントを認める「Safe Area」という概念が導入され、通常のWebサイトデザイはこの「SafeArea」に収まるそうですが、

iPhone XのSafe Area

For iOS 11, a new layout guide was added to auto-layout called a Safe Area layout guide.[…]On iPhone X, the Safe Area layout guide provides an additional benefit. It’s inset from the top and bottom of the screen edges in portrait orientation, even when no bars are visible on screen.

Designing for iPhone X – Fall 2017 – Videos – Apple Developer

公開されたブログではiPhone Xのスクリーン全体を利用するためにViewportに新たに追加された”viewport-fit“および”viewport-fit=cover”によりセンサーハウジングなどと被ってしまうコンテンツなどを「Safe Area」に戻すための値を参照できる”safe-area-inset-“の説明などがされているので、Web開発者の方はチェックしてみて下さい。

viewport-fit=coverとsafe-area-inset-の説明

WebKitブログに掲載されているiPhone Xの画像をクリックすると実際のWebサイトが表示され、ソースコードをチェックできます。また、AppleのWebサイトもこれから対応予定のようです。

コメント

  1. 匿名 より:

    面倒くさいよぅ。Xはあくまでも記念モデルってことで早々にディスコンにして欲しい。