タグ

iPhoneXに関するglat_designのブックマーク (2)

  • iPhone X の Safari における Web コンテンツの表示 - ONO TAKEHIKO - Medium

    iPhone X が発表されて間もなく、ディスプレイの「切り欠き」については至るところでちょっとしたイジリ合戦が始まっています。中には実際に信じてしまっている人もいるほど秀逸なものがありまして、それがこちら。 思わずクスッときてしまいますが(笑)、まあ当然こんなことにはなりません。 iPhone X にはディスプレイの上下左右に iOS の占有領域が存在し、それ以外(アプリのタッチイベントを認める領域)を Safe Area と呼ぶようです。Safe Area の外にある上部領域にはステータスバーとして時計やアンテナのインジケータなど iOS のシステムアイコン等が並び、下部の領域には iPhone X で導入された「ホームバー」が存在することになります。 では iPhone X の Safari で Web サイトを表示した場合に一体どのようになるのか?それを Web 上の情報を元にまと

    iPhone X の Safari における Web コンテンツの表示 - ONO TAKEHIKO - Medium
    glat_design
    glat_design 2017/09/20
    viewport-fit=coverとconstant(safe-area-inset-*)値 /
  • iPhone X対応におけるデザイン上の注意ポイント | fladdict

    iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ

    iPhone X対応におけるデザイン上の注意ポイント | fladdict
    glat_design
    glat_design 2017/09/13
    新しいデバイスって感じがしてワクワクはある /
  • 1