iPhone Xの角丸に対応するために。viewport-fit=coverで横幅いっぱいに広がる。またconstant(safe-area-inset-top)等で必要な空白の長さを得られるので、これをpaddingに設定すると吉。

ginpei のブックマーク 2017/09/21 16:47

<blockquote class="hatena-bookmark-comment"><a class="comment-info" href="https://b.hatena.ne.jp/entry/344969542/comment/ginpei" data-user-id="ginpei" data-entry-url="https://b.hatena.ne.jp/entry/s/css-tricks.com/the-notch-and-css/" data-original-href="https://css-tricks.com/the-notch-and-css/" data-entry-favicon="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcss-tricks.com%2Fthe-notch-and-css%2F" data-user-icon="/users/ginpei/profile.png">"The Notch" and CSS | CSS-Tricks</a><ul class="comment-tag" style="list-style: none; margin: 0px;"><li style="float: left">[<a href="https://b.hatena.ne.jp/q/css">css</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/iPhone">iPhone</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/%E6%99%82%E4%BA%8B">時事</a>]</li></ul><br><p style="clear: left">iPhone Xの角丸に対応するために。viewport-fit=coverで横幅いっぱいに広がる。またconstant(safe-area-inset-top)等で必要な空白の長さを得られるので、これをpaddingに設定すると吉。</p><a class="datetime" href="https://b.hatena.ne.jp/ginpei/20170921#bookmark-344969542"><span class="datetime-body">2017/09/21 16:47</span></a></blockquote><script src="https://b.st-hatena.com/js/comment-widget.js" charset="utf-8" async></script>

このブックマークにはスターがありません。
最初のスターをつけてみよう！

"The Notch" and CSS | CSS-Tricks

css-tricks.com2017/09/17

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Apple’s iPhone X has a screen that covers the entire face of the phone, ...

17 人がブックマーク・2 件のコメント

他のコメントを読む

＼コメントがサクサク読めるアプリです／

はてなブックマーク

"The Notch" and CSS | CSS-Tricks

はてなブックマーク

公式Twitter

はてなのサービス