摘要:本文将带你了解IOS开发入门ios开发教程之iphonex适配问题解析,希望本文对大家学IOS有所帮助。
本文将带你了解IOS开发入门ios开发教程之iphonex适配问题解析,希望本文对大家学IOS有所帮助。
iphone又一次颠覆了行业,每次都是如此的任性,每次出个问题都要消费者买单。这次最需要买单的是设计师。iphonex这货硬件上出了个留海,软件上又出了个底部手柄。说实话演示起来很酷炫,适配起来就有点苦逼了。
下面说集中适配的方案,其实最基本的思路就是避开上下两块区域,只在安全区域显示内容。
最简单的方案
上下使用固定定位,上面用黑色吧44px高度,固定住,下面呢用34px固定住。内容展示方面body也设置一下padding。
<meta charset="UTF-8" />
<title></title>
<meta content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes" name="viewport" />
<style type="text/css">
body{padding-top:44px;padding-bottom: 34px;}
.top{position: fixed;width:100%;height:44px;background-color: #000;top:0;left: 0;}
.bottom{position: fixed;width:100%;height:34px;bottom:0;left: 0;}</style>
sfsd
进化方案
上面的方式很明显,适合初始开发那么已经做了开发的现有项目应该怎么快速适配呢,根据上面的思路我写了个比较通用的css,只需要将css引入,给body增加这个class就可以了。css中根据分辨率做了筛选,所以不会影响现有的其他设备适配。
iphonex.css
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
.iphonex{padding-top:44px;padding-bottom: 34px;}
.iphonex:before{content:'';display:block;position: fixed;width:100%;height:44px;background-color: #000;top:0;left: 0;z-index:9999;}
.iphonex:after{content:'';display:block;position: fixed;width:100%;height:34px;bottom:0;left: 0;z-index:9999;}
}
html文件
<meta charset="UTF-8" />
<title></title>
<meta content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes" name="viewport" />
<link href="iphonex.css" rel="stylesheet" /
你自己的页面内容
注意:如果你页面里面已经存在定位,可能需要自己调整一下,原有元素的定位。
其他思路
大体上思路就是让上下空出来,实现的方式还有很多,比如运用绝对定位,或者js等等。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之IOS频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号