viewport-fit=cover 和 shrink-to-fit=no 的解释

shrink-to-fit=no

下面的一行代码可以让网页的宽度自动适应手机屏幕的宽度

<meta name="viewport" content="width=device-width, initial-scale=1">

但在IOS9中要想起作用,得加上"shrink-to-fit=no"

原因如下:

Viewport meta tags using"width=device-width" cause the page to scale down to fit content that overflows the viewport bounds. You can override this behavior by adding "shrink-to-fit=no" to your meta tag as shown below. The added value will prevent the page from scaling to fit the viewport.

viewport-fit=cover

iphoneX底部会出现一道白条。解决的方案是:

meta标签添加viewport-fit=cover 属性,使页面占满整个屏幕,代码如下:

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