H5 适配 iPhone X

举报
yechaoa 发表于 2022/06/01 00:36:19 2022/06/01
【摘要】 1,设置网页在可视窗口的布局方式 新增 viweport-fit 属性,使得页面内容完全覆盖整个窗口: <meta name=“viewport” content=“width=device-w...

1,设置网页在可视窗口的布局方式

新增 viweport-fit 属性,使得页面内容完全覆盖整个窗口:

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

  
 
  • 1

只有设置了 viewport-fit=cover,才能使用 env 函数。

  • contain: 可视窗口完全包含网页内容(左图)
  • cover:网页内容完全覆盖可视窗口(右图)
  • auto:默认值,跟 contain 表现一致

2,页面主体内容限定在安全区域内

这一步根据实际页面场景选择,如果不设置这个值,可能存在小黑条遮挡页面最底部内容的情况。

body {
	padding-bottom: env(safe-area-inset-bottom);
}

  
 
  • 1
  • 2
  • 3

iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量:

  • safe-area-inset-left:安全区域距离左边边界距离
  • safe-area-inset-right:安全区域距离右边边界距离
  • safe-area-inset-top:安全区域距离顶部边界距离
  • safe-area-inset-bottom:安全区域距离底部边界距离

这里我们只需要关注 safe-area-inset-bottom 这个变量,因为它对应的就是小黑条的高度(横竖屏时值不一样)。

3,fixed 元素的适配

  • 可以通过加内边距 padding 扩展高度:
{
	padding-bottom: env(safe-area-inset-bottom);
}

  
 
  • 1
  • 2
  • 3
  • 或者通过计算函数 calc 覆盖原来高度:
{
	height: calc(60px(假设值) + env(safe-area-inset-bottom));
}

  
 
  • 1
  • 2
  • 3
  • 或者,你也可以通过计算函数 calc 覆盖原来 bottom 值:
{
	bottom: calc(50px(假设值) + env(safe-area-inset-bottom));
}

  
 
  • 1
  • 2
  • 3

4,别忘了使用 @supports

一般我们只希望 iPhoneX 才需要新增适配样式,我们可以配合 @supports 这样编写样式:

@supports (bottom: env(safe-area-inset-bottom)) {
	div {
		margin-bottom: env(safe-area-inset-bottom);
	}
}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5



原文:https://blog.csdn.net/dx18520548758/article/details/80010358

文章来源: blog.csdn.net,作者:yechaoa,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/yechaoa/article/details/85318808

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。