这次，我们将带来与在iPhoneX上匹配HTML5页面相关的问题。 另外，在iPhoneX上适合HTML5页面的注意事项是什么？ 介绍实战性的案例。 一起看看吧。
1. iPhoneX介绍
屏幕大小
倍图实际上是像素尺寸和开发尺寸的倍率关系，但这只是外表的表现。 倍率图的核心影响因素在于PPI(dpi )，了解画面密度与各大小的关系有助于深入理解倍率的概念。 《基础知识学起来！为设计师量身打造的DPI指南》
iPhone8在此次升级中，继承了iPhone6以后屏幕尺寸和分辨率的优秀传统
但是iPhone X在屏幕尺寸、分辨率甚至形状上都有了很大的变化，以下我们以iPhone 8为参照物，来看看如何看待iPhone X的适配。
2. iPhoneX的适配---安全区域(safe area ) ) ) ) )。
苹果对iPhone X的设计布局有以下意见：
核心内容是Safe area，它必须不会被设备的“圆角”(corners )、传感器外壳(sensor housing，对齐刘海)和底部的“Home Indicator”遮挡。 也就是说，我们设计和显示的内容应该尽量位于安全的区域内；
3. iPhoneX的适配---适配方案viewport-fit 3.1 PhoneX的适配在iOS 11上采用了viewport-fit的元标签作为适配方案； viewport-fit的默认值为自动。
viewport-fit的值如下。
自动默认值： viewprot-fit:contain； 页面内容显示在safe area中
cover viewport-fit:cover，满屏页面
viewport-fit meta标记设置(cover时) ) ) ) ) )。
3.2 css constant ()函数和safe-area-inset-topsafe-area-inset-left safe-area-inset-inset-bottt
在上图所示iOS 11的WebKit中，包含新的CSS函数constant ()、safe-area-inset-left、safe-area-inset-right、safe-area-left
3.1设置viewport-fit : contain，即默认值时； 设置safe-area-inset-left、safe-area-inset-right、safe-area-inset-top、safe-area-inset-bottom等参数
3.2设置viewport-fit : cover时：以下body {
padding-top :常数(safe-area-inset-top )； //导航栏状态栏高度88px
padding-left :常数(safe-area-inset-left )； //如果不是纵向画面，则为0
padding-right 3360常数(safe-area-inset-right )； //如果不是纵向画面，则为0
padding-bottom 3360常数(safe-area-inset-bottom )； //下方圆弧高度34px
}
4. iPhoneX兼容---高级统计
视口- fit :覆盖导航栏
5.iPhoneX适配---媒体查询
请注意，这里采用的是690 px (安全区域的高度)，而不是812px； @ mediaonlyscreenand (width :375 px ) and (height 3360690 px ) )。
body {
background :蓝；
}
}
6.iphoneX viewport-fit
问题总结
关于iphoneX页面使用渐变时； 如果viewport-fit:cover；
1.1如果设置了背景色单色和渐变之间的差异，则单色将填充整个屏幕，如果设置了渐变，则仅渲染子元素的高度。 而且页面的高度只有690px，上面使用了padding-top:88px；
主体固定如下。
this is subElement 1.单色时： * {
padding: 0；
边距： 0；
}
body {
background:green；
padding-top :常数(safe-area-inset-top )； //88px
/* padding-left :常数(safe-area-inset-left )； */
/* padding-right :常数(safe-area-inset-right )； */
/* padding-bottom 3360常数(safe-area-inset-bottom )； */
}
2 .渐变* {
padding: 0；
边距： 0；
}
body {
background :-WebKit-gradient (linear，0，0 bottom，from ) #ffd54f )，to ) #FFAA22 ) )；
padding-top :常数(safe-area-inset-top )； //88px
/* padding-left :常数(safe-area-inset-left )； */
/* padding-right :常数(safe-area-inset-right )； */
/* padding-bottom 3360常数(safe-area-inset-bottom )； */
}
如何使用渐变填充整个屏幕CSS的设置如下
designingwebsitesforiphonex : respectingthesafeareas
padding: 0；
边距： 0；
}
html，body {
height: 100%；
}
body {
padding-top :常数(safe-area-inset-top )；
padding-left :常数(safe-area-inset-left )；
padding-right 3360常数(safe-area-inset-right )；
padding-bottom 3360常数(safe-area-inset-bottom )；
}
. content {
background :-WebKit-gradient (linear，0，0 bottom，from ) #ffd54f )，to ) #FFAA22 ) )；
width: 100%；
height: 724px；
}
this is subElement相信，看到这些案例，你就掌握了方法。 更多精彩请关注php中文网的其他相关文章。
相关文章：