最近刚刚升级了最新的xcode9.1,紧随而来的就是对iPhone X的适配工作.由于我们项目并不是使用的ionic,而是cordova项目,所以需要自己对cordova项目进行适配工作
准备工作
1.创建一个新的cordova工程
cordova create myApp
2.创建成功后,直接添加ios平台
cordova platform add ios
image.png
3.平台添加成功后,直接打开xcode用iPhone X的模拟器运行该程序
运行后可以发现,在应用上下两侧,出现了两条黑色以及两条灰色的边框,所以我们再这里就要对应用进行调整,使它能够适配屏幕
image.png
4.适配的过程其实也很简单
1).增加资源文件,使应用能够适配整个屏幕,去掉两条黑色边框
打开config.xml ,增加节点
config.xml
即增加一个2732*2732的一张图片(这里偷懒了,直接拿了个ionic工程的图片..)
编译工程
cordova build ios
在模拟器上重新运行项目,发现刚刚的两条黑色边框已经不见了
image.png
2).接下来就是对网页进行适配,使网页能够适配应用,去掉灰色边框
这个就比较简单了,打开首页文件,在meta中增加viewport-fit=cover属性
viewport
增加完成后,再次重新编译,并在模拟器上运行,可以看到,最初的黑色边框及灰色边框就都不见了
image.png
这样我们的屏幕适配工作就完成了,接下来的工作,就是根据应用的页面,调整对应的css即可
网友评论