欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

Removing the White Bars in Safari on iPhone X

发布时间:2017-12-07  编辑:杨雨个人博客网站   点击:   

The new iPhone X features a beautiful edge-to-edge display. Well, almost. There is the small issue of a notch at the top of the browser which doesn't cause an issue when viewing websites in portrait but by default does cause some issues in landscape.

To accommodate the notch iOS 11 constrains websites within a "safe area" on the screen. On most websites this results in letterboxing on the left and the right.

Letterboxing on iPhone X in Safari on iOS 11

Thankfully there are two simple fixes that can be made to solve this letterboxing.

background-color

If your website uses a single solid colour for its background then the best and easiest solution for you is to set a background-color property on your body tag. That results in the following on the above website.

Letterboxing resolved with background-color

As you can see the margins are left intact but are now filled with the correct colour.

viewport-fit

If you prefer to have extra control over your design or you're using a gradient or image as the background then setting a background-color might not be viable. In the latest version of iOS Apple have added the viewport-fit descriptor from the .

Simply adding viewport-fit=cover to your viewport meta tag will expand your site to fill the entire screen and not just the safe area.

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

That results in the website rendering like this:

Letterboxing resolved with viewport-fit=cover

Obviously the design will now need some manual adjustment to accommodate the notch but how that is handled is now down to the developer/designer.

safe-area-inset-*

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.

safe-area-inset-top

safe-area-inset-right

safe-area-inset-left

safe-area-inset-bottom

This can be added to margin, padding, or absolute position values such a top or left.

I added the following to the main container on the website.

padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

This resolved the issue I had with the menu and social media icons perfectly.

Adding safe-area-inset-right to fix padding on iPhone X

UPDATE: Example was changed to use the correct constants on all sides and to reference the correct CSS spec for viewport-fit.

UPDATE 2: constant has been removed from iOS 11.2 in favour of the standardised env. The post has been updated to reflect this.

Come Say Hello! Drop me an email, follow me on Twitter, or check out Cocoon (you totally should, we're doing some cool stuff over there).

本文地址:http://itbyc.com/web/html5/18622.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1