适配iphone X

Kerr1Gan 发布于2019-08-29 14:05 / 2193人阅读

摘要：首先需要为标签加上，默认，跟类似。当值设置为既可让安全区域铺满全屏，就跟适配其他设备没什么区别了。但是内容会被顶部和底部的硬件遮挡，如果不想被遮挡，就需要头部底部预留一定高度。

首先需要为meta标签加上viewport-fit=cover，默认viewport-fit=contain，跟background-size类似。
当值设置为cover既可让安全区域铺满全屏，就跟适配其他设备没什么区别了。
但是内容会被顶部和底部的硬件遮挡，如果不想被遮挡，就需要头部底部预留一定高度。
所以就需为body加上padding，官方提供了四个值，可以直接获取到头部底部以及横屏时候的左侧右侧值，我们只需要在自己的容器设置上着四个值即可：
constant-top: (safe-area-inset-top)
padding-left: constant(safe-area-inset-left)
padding-right: constant(safe-area-inset-right)
padding-bottom: constant(safe-area-inset-bottom)

需要注意的是，viewport-fit值不为cover设置constant()是无效的

竖屏时候左侧右侧值为0，横屏时候左侧右侧才有值

code meta

css

.container {
  overflow: scroll;
  box-sizing: border-box;
  padding-top: constant(safe-area-inset-top);
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-bottom: constant(safe-area-inset-bottom);
}

云服务器 GPU云服务器适配问题机型适配屏幕适配适配座

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112915.html

前端iPhone X适配总结

摘要：页面主体内容限定在安全区域内元素的适配如果元素是定位且，那么除了设置的还不够，还需要给它自身添加，因为它是相对于屏幕最底部定位的。屏幕尺寸垂直方向上，iPhone X的显示宽度与iPhone 6，iPhone 7 和 iPhone 8 的 4.7 英寸一样，但是比4.7英寸的显示屏高145pt。安全区域安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）...

Zoom 2019-08-30 14:10 评论0 收藏0
前端iPhone X适配总结

摘要：页面主体内容限定在安全区域内元素的适配如果元素是定位且，那么除了设置的还不够，还需要给它自身添加，因为它是相对于屏幕最底部定位的。屏幕尺寸垂直方向上，iPhone X的显示宽度与iPhone 6，iPhone 7 和 iPhone 8 的 4.7 英寸一样，但是比4.7英寸的显示屏高145pt。安全区域安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）...

JackJiang 2019-08-22 15:32 评论0 收藏0
前端iPhone X适配总结

摘要：页面主体内容限定在安全区域内元素的适配如果元素是定位且，那么除了设置的还不够，还需要给它自身添加，因为它是相对于屏幕最底部定位的。屏幕尺寸垂直方向上，iPhone X的显示宽度与iPhone 6，iPhone 7 和 iPhone 8 的 4.7 英寸一样，但是比4.7英寸的显示屏高145pt。安全区域安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）...

LiuRhoRamen 2019-08-01 18:42 评论0 收藏0
iPhone X 媒体查询适配

摘要：适合一英寸的像素总数称为屏幕密度或像素密度，其测量为每英寸像素数。设备大多具有或显示屏，因此您可以使用一般的视网膜媒体查询在所有类型的设备上显示高分辨率内容。 iPhone X尺寸 5.8 英寸 5.65 x 2.79 x 0.30 英寸 iPhone X分辨率 1125 x 2436 每英寸PX~458 像素屏幕尺寸 Apple iPhone X的屏幕为5.8英寸，约为实际...

cuieney 2019-08-29 17:25 评论0 收藏0