[分享] 移动端适配iPhoneX方案

简介: [分享] 移动端适配iPhoneX方案

对页面进行iPhoneX适配处理教程

  • 在viewport 中添加 viewport-fit=cover 属性

``

``

  • 安全区设置

iOS 11中包含了一个新的CSS函数 env(),以及一组四个预定义的常量:safe-area-inset-leftsafe-area-inset-rightsafe-area-inset-top和 safe-area-inset-bottom

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

image
一般我们只希望 iPhoneX 适配样式,可以配合 @supports 进行css条件判断使用样式:

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

拓展阅读
iPhone X的Web设计
这里总结了大家iOS 11,iPhone X 适配问题

目录
相关文章
|
2月前
|
编解码 前端开发 JavaScript
前端移动端适配方案
【9月更文挑战第8天】前端移动端适配方案
82 0
|
3月前
|
前端开发
移动端适配问题
【8月更文挑战第6天】
53 4
|
3月前
|
Web App开发 前端开发
什么是移动端适配
【8月更文挑战第2天】
|
3月前
|
前端开发 JavaScript
移动端适配
【8月更文挑战第4天】
40 4
|
3月前
|
前端开发 小程序
移动端适配方案
【8月更文挑战第1天】
|
6月前
|
Web App开发 编解码 前端开发
如何做移动端适配?
如何做移动端适配?
63 0
|
iOS开发
移动端iPhone系列适配问题的一些坑
移动端iPhone系列适配问题的一些坑
96 0
|
JavaScript
深入了解移动端适配的方案
深入了解移动端适配的方案
249 0
|
缓存 编解码 监控
移动端适配方案总结(二)
由于自己太久没开发移动端的页面,个人觉得移动端开发相比较PC端开发最大的不同,在于需要去适配各种尺寸的手机屏幕,尤其还有1px的问题。
237 0
|
编解码 前端开发
移动端适配方案总结(一)
由于自己太久没开发移动端的页面,个人觉得移动端开发相比较PC端开发最大的不同,在于需要去适配各种尺寸的手机屏幕,尤其还有1px的问题。
162 0