[分享] 移动端适配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 适配问题

目录
相关文章
|
19天前
|
编解码 iOS开发 UED
响应式设计在 iPhone 开发适配中的具体应用
【10月更文挑战第23天】响应式设计在 iPhone 开发适配中扮演着至关重要的角色,它能够帮助我们打造出适应不同屏幕尺寸和用户需求的高质量应用。通过合理运用响应式设计的原则和方法,我们可以在提供良好用户体验的同时,提高开发效率和应用的可维护性。
|
2月前
|
编解码 前端开发 JavaScript
前端移动端适配方案
【9月更文挑战第8天】前端移动端适配方案
93 0
|
3月前
|
Web App开发 前端开发
什么是移动端适配
【8月更文挑战第2天】
|
3月前
|
前端开发 JavaScript
移动端适配
【8月更文挑战第4天】
41 4
|
3月前
|
前端开发
移动端适配问题
【8月更文挑战第6天】
53 4
|
3月前
|
前端开发 小程序
移动端适配方案
【8月更文挑战第1天】
|
6月前
|
Web App开发 编解码 前端开发
如何做移动端适配?
如何做移动端适配?
63 0
|
iOS开发
移动端iPhone系列适配问题的一些坑
移动端iPhone系列适配问题的一些坑
99 0
|
JavaScript
深入了解移动端适配的方案
深入了解移动端适配的方案
251 0
|
编解码 前端开发
移动端适配方案总结(一)
由于自己太久没开发移动端的页面,个人觉得移动端开发相比较PC端开发最大的不同,在于需要去适配各种尺寸的手机屏幕,尤其还有1px的问题。
166 0