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

目录
相关文章
|
1月前
|
编解码
跨屏适配问题有哪些
跨屏适配问题有哪些
10 0
|
4月前
|
Web App开发 编解码 前端开发
如何做移动端适配?
如何做移动端适配?
40 0
|
5月前
|
iOS开发
移动端iPhone系列适配问题的一些坑
移动端iPhone系列适配问题的一些坑
53 0
|
8月前
|
JavaScript
深入了解移动端适配的方案
深入了解移动端适配的方案
169 0
|
8月前
|
编解码 前端开发 JavaScript
前端移动端优化和适配
前端移动端优化和适配
136 0
|
9月前
|
编解码 前端开发
移动端适配方案总结(一)
由于自己太久没开发移动端的页面,个人觉得移动端开发相比较PC端开发最大的不同,在于需要去适配各种尺寸的手机屏幕,尤其还有1px的问题。
109 0
|
9月前
|
缓存 编解码 监控
移动端适配方案总结(二)
由于自己太久没开发移动端的页面,个人觉得移动端开发相比较PC端开发最大的不同,在于需要去适配各种尺寸的手机屏幕,尤其还有1px的问题。
176 0
|
10月前
移动端适配方案
移动端适配方案
42 0
|
11月前
|
编解码 自然语言处理 前端开发
PC端高倍屏适配方案实践
随着PC端屏幕的发展,PC端也逐步出现了更高倍数的屏幕,相对于手机端的Retina屏,PC端也出现了多倍数适配的要求,本文主要是PC端高倍屏幕适配方案的一个实践总结,希望能给对PC端有适配高倍屏幕需求的同学有一些思路的启发和借鉴
117 0
|
移动开发 前端开发 JavaScript
超详细讲解 H5 移动端适配方案
超详细讲解 H5 移动端适配方案
超详细讲解 H5 移动端适配方案