iPhone Duo対応でレスポンシブ設計を見直す。端末ではなく「available space」でレイアウトを決める
iPhone Duoでは、閉じた外画面、開いた内画面、Split ViewでSafariに与えられる領域が変わる。Duo上のWeb表示、確定している解像度、検証方法を確認し、deviceではなくavailable spaceを基準にしたレスポンシブ設計を考える。
iPhone Duoでは、閉じた外画面、開いた内画面、Split ViewでSafariに与えられる領域が変わる。Duo上のWeb表示、確定している解像度、検証方法を確認し、deviceではなくavailable spaceを基準にしたレスポンシブ設計を考える。
パララックスやスクロール連動アニメーション、親要素の状態判定、コンテナークエリなど、JavaScriptで実装しがちな6つの処理をCSSへ移せる場面と注意点を、実装例を交えて紹介します。