h5苹果x适配,移动端iphonex适配
1. iPhoneX的介绍
屏幕大小
众所周知的iPhone系列开发维度总结如下：
iPhone各机型的开发尺寸
变成我们熟知的像素大小：
每个机型的多维度尺寸
放大倍数其实就是像素大小和显影大小的放大关系，但这只是外在表现。放大的关键因素在于PPI(DPI)。了解屏幕密度与各种尺寸的关系，有助于我们理解放大倍数的概念：《基础知识学起来！为设计师量身打造的DPI指南》。
8 iPhone在这次升级中，屏幕尺寸和分辨率都继承了iPhone6的优良传统；
但是iPhone X在屏幕尺寸、分辨率甚至外形上都发生了很大的变化。我们以iPhone 8为参照，看看应该如何考虑iPhone X的适配。
我们来看看iPhone X的尺寸变化：
2. iPhoneX的适配---安全区域(safe area)
对苹果iPhone X的设计布局意见如下：
核心内容要在安全区域，保证不会被设备边角、传感器外壳、底部Home指示灯遮挡。也就是说，我们设计和展示的内容要尽可能的安全；
3. iPhoneX的适配-viewport-fit的适配3.1 PhoneX，iOS 11中采用viewport-fit的meta标签作为适配方案；视口适合的默认值是自动。
视口适合值如下：
auto:view prot-fit:contain；页面内容显示在安全区域cover视口-fit:cover中，并且页面内容会填满屏幕。
视口适配元标签的设置(覆盖时)
meta name= viewport content= width=device-width，initial-scale=1.0，minimum-scale=1.0，maximum-scale=1.0，user-scalable=no，引入viewport-fit=cover 3.2 CSS constant()函数和safe-area-inset-top safe-area-inset-left safe-area-inset-right safe-area-inset-bottom
如上图，iOS 11中的WebKit包含了一个新的CSS函数常量()和一组四个预定义的常量：safe-area-inset-left、safe-area-inset-right、safe-area-inset-top和safe-area-inset-bottom。当合并一起使用时，样式允许参考每个方面的安全区域的大小。
3.1当我们设置viewport-fit:contain时，这是默认的；设置参数如安全区-左内插、安全区-右内插、安全区-上内插和安全区-下内插不起作用。
3.2当我们设置viewport-fit:cover:设置如下
body { padding-top:constant(safe-area-inset-top)；//是导航栏状态栏的高度88px padding-left:constant(safe-area-inset-left)；//0 padding-right:如果屏幕不是垂直的，则为常量(safe-area-inset-right)；//0 padding-bottom:如果屏幕不是垂直的，则为常量(safe-area-inset-bottom)；//是底弧的高度34px}4. iPhoneX的适配---高度统计。
视口适合：覆盖导航栏
5.iPhoneX的适配---媒体查询
注意，这里用的是690px(安全区高度)，不是812px
@media only屏幕和(宽度：375px)和(高度：690 px){ body { background:blue；}}6.iphoneX viewport-fit
问题总结
1.iphoneX页面使用渐变颜色时；如果视口适合：覆盖；
1.1设置背景色单色和渐变的区别时，如果是单色，会占满整个屏幕；如果设置了渐变，只会在子元素的高度渲染；而且页面高度只有690px，上面还有padding-top:88px；
将主体固定为：
Body class= content 这是子元素/div/body1。单色：
* {填充：0；边距：0；}正文{背景：绿色；padding-top:常量(安全区域-inset-top)；//88px /*padding-left:常量(safe-area-inset-left)；*//*padding-right:常量(safe-area-inset-right)；*//*padding-bottom:常量(safe-area-inset-bottom)；*/}2.渐变颜色
* {填充：0;边距：0;} body { background:-WebKit-gradient(linear，0 0，0 bottom，from(#ffd54f)，to(# ffaa 22))；顶部填充：常量（安全区域-顶部嵌入)；//88px/*左填充：常量(安全区域-左侧插图)；*//*填充-右侧：常量(安全区域-右侧插图)；*//*底部填充：常量(安全区域-插入-底部)；*/}解决使用渐变色仍旧填充整个屏幕的方法；半铸钢钢性铸铁(铸造半钢)设置如下
！DOCTYPE html html head meta name= viewport content= initial-scale=1，viewport-fit=cover title为全网通设计网站：考虑安全区域/标题样式* {填充：0；边距：0;} html，body { height:100%；} body { padding-top:constant(safe-area-inset-top)；左填充：常量（安全区域-插入-左侧);填充-右侧：常量(安全区域-右侧插图)；底部填充：常量（安全区域-插入-底部);} .内容{背景：-webkit-gradient(linear，0 0，0 bottom，from(#ffd54f)，to(# ffaa 22))；宽度：100%;身高：724 px }/style/head body div class= content 这是子元素/div/body/html2 .页面元素使用了固定定位的适配即：{位置：固定；}
2.1 子元素页面固定在底部时；使用视口适合：包含时；可以看到底部：0时只会显示在安全区域内；
！DOCTYPE html html head meta name= viewport content= initial-scale=1 ！-meta name= viewport content= initial-scale=1，viewport-fit=cover -title为全网通设计网站：尊重安全区域/标题样式* {填充：0；边距：0;} /*html，body { *//* height:100%；*//*}*/body {背景：灰色；/* padding-top:constant(safe-area-inset-top)；*//*左填充：常量(安全区域-左侧插图)；*//*填充-右侧：常量(安全区域-右侧插图)；*//*底部填充：常量(安全区域-插入-底部)；*/} .顶部{宽度：100%;身高：44px背景：紫色；} .底部{位置：固定；底部：0;左：0;右：0;身高：44px颜色：黑色；背景：绿色；} /style/headbody div class=top 这是top/div div class=bottom 这是bottom/div/body/html2.1子元素页面固定在底部时；使用视口适合：覆盖时；可以看到底部：0时只会显示在安全区域内；
添加html，body { width:100%；高度：100%}
图1:
* {填充：0;边距：0;} html，body { height:100%；}正文{背景：灰色；顶部填充：常量（安全区域-顶部嵌入)；左填充：常量（安全区域-插入-左侧);填充-右侧：常量(安全区域-右侧插图)；底部填充：常量（安全区域-插入-底部);} .顶部{宽度：100%;身高：44px背景：紫色；} .底部{位置：固定；底部：0;左：0;右：0;身高：44px颜色：黑色；背景：绿色；}图2:
* {填充：0;边距：0;} html，body { height:100%；}正文{背景：灰色；顶部填充：常量（安全区域-顶部嵌入)；左填充：常量（安全区域-插入-左侧);填充-右侧：常量(安全区域-右侧插图)；/*底部填充：常量(安全区域-插入-底部)；*/} .顶部{宽度：100%;身高：44px背景：紫色；} .底部{位置：固定；底部：0;左：0;右：0;身高：44px颜色：黑色；背景：绿色；}2.3 关于提醒对话框弹框遮罩层的解决方案
！文档类型html html lang= en head meta charset= UTF-8 ！-meta name= viewport content= width=device-width，initial-scale=1.0，minimum-scale=1.0，maximum-scale=1.0，user-scale=no -meta name= viewport content= width=device-width，initial-scale=1.0，minimum-scale=1.0，maximum-scale=1.0，user-scalable=no，viewport-fit=cover meta http-equiv= pragma content= no-cache meta http-equiv= cache填充：0;} html，body { width:100%；身高：100%;} body { font-size:0.32雷姆；顶部填充：常量（安全区域-顶部嵌入)；左填充：常量（安全区域-插入-左侧);填充-右侧：常量(安全区域-右侧插图)；底部填充：常量（安全区域-插入-底部);} .content { text-align:center；} .测试but { margin:50px auto；宽度：100像素身高：44px边框：1px纯黑灰色；大纲：无；用户选择：无；背景色：黄色；}/style link href=警报视图。CSS rel=样式表 type= text/CSS /head body section class= content but class= test but onclick= show loading()弹框加载/按钮/部分脚本type= text/JavaScript src=警报视图。js /脚本脚本函数显示loading(){ uialert视图。显示({类型：输入，标题：温馨提示, //标题内容： VIP会员即将到期, //获取新的是知道：假})；var xx=new UIAlertView()；控制台。log(xx)；}/脚本/正文/html总结
以上所述是小编给大家介绍的有关HTML5页面在iPhoneX适配问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。