适配

1、ios11为了适配x新增新属性viewport-fit,属性值三个

    contain:可视窗口完全包含网页内容

    cover: 网页内容完全覆盖可视窗口

    auto:默认值,与contain表现一致

    注:适配 iPhoneX 需设置 viewport-fit=cover

2、padding-bottom:constant(safe-area-inset-bottom);/* 兼容 iOS < 11.2 */

    padding-bottom:env(safe-area-inset-bottom);/* 兼容 iOS >= 11.2 */

    注:env() 跟 constant() 需要同时存在,而且顺序不能换。


step1:

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

step2:

    body{ 

        padding-bottom: constant(safe-area-inset-bottom); 

        padding-bottom: env(safe-area-inset-bottom)

    }

step3:fix元素的适配(bottom = 0)时


fixed非完全吸底元素(bottom≠0)


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容