![]() ![]() Where iOS 11 differs from earlier versions is that the webview content now respects the safe areas. There is another awkward situation with the notch, the safe area, and fixed positioning. ( Update: when the iPhone X first came out, it used constant() instead of env(), but as of 11.2, constant() has been removed in favor of the standardized env()). padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) ![]() I added the following to the main container on the website. This can be added to margin, padding, or absolute position values such a top or left. In order to handle any adjustment that may be required iOS 11’s version of Safari includes some constants that can be used when viewport-fit=cover is being used. There is some new CSS that helps you accommodate for that. Then it’s on you to account for any overlapping that normally would have been handled by the safe area. Or, expand the website the whole area (notch be damned), you can add viewport-fit=cover to your meta viewport tag. It’s not much of a trick to remove it though, a background-color on the body will do. The result is some awkward situations for screen design, like constraining websites to a “safe area” and having white bars on the edges. Apple’s iPhone X has a screen that covers the entire face of the phone, save for a “notch” to make space for a camera and other various components. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |