iphonex适配
来源:互联网 发布:淘宝信用卡收费标准 编辑:程序博客网 时间:2024/09/21 06:38
iphone又一次颠覆了行业,每次都是如此的任性,每次出个问题都要消费者买单。这次最需要买单的是设计师。iphonex这货硬件上出了个留海,软件上又出了个底部手柄。说实话演示起来很酷炫,适配起来就有点苦逼了。
下面说集中适配的方案,其实最基本的思路就是避开上下两块区域,只在安全区域显示内容。
最简单的方案
上下使用固定定位,上面用黑色吧44px高度,固定住,下面呢用34px固定住。内容展示方面body也设置一下padding。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>iphonex</title> <meta content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes" name="viewport"> <style> 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></head><body><div class="top"></div><div class="content">sfsd</div><div class="bottom"></div></body></html>
进化方案
上面的方式很明显,适合初始开发那么已经做了开发的现有项目应该怎么快速适配呢,根据上面的思路我写了个比较通用的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文件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>iphonex</title> <meta content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes" name="viewport"> <link rel="stylesheet" href="iphonex.css"></head><body class="iphonex">你自己的页面内容</body></html>
注意:如果你页面里面已经存在定位,可能需要自己调整一下,原有元素的定位。
其他思路
大体上思路就是让上下空出来,实现的方式还有很多,比如运用绝对定位,或者js等等。想一下,还是有很多的。不要局限于一种思路,多思考会有更多心得发现
阅读全文
0 0
- iPhoneX 适配
- iPhoneX适配
- 适配iPhoneX
- iPhoneX 适配
- iphonex适配
- iphonex适配
- iPhoneX适配
- 适配iPhoneX和Xcode9
- ReactNative 适配iPhoneX
- iOS 11 & iPhoneX 适配
- ReactNative 适配iPhoneX
- iOS-适配iPhoneX相关
- ios11以及iphonex适配
- iPhoneX
- 你需要的iPhoneX适配
- MJRefresh适配ios11以及iPhoneX
- 适配 iPhoneX & iOS11 新特性
- iphoneX适配-客户端H5页面
- 06 WEB学习 Tomacat 配置 HTTP通信
- 新技术:如何用VR训练机器人?
- java中八种基本数据类型以及它们的封装类,String类型的一些理解
- 【ESP8266】ESP8266_NONOS_SDK开发包生成的镜像文件构建步骤分析
- Android媒体扫描
- iphonex适配
- Java多线程工具包java.util.concurrent---ArrayBlockingQueue
- 脏读、幻读、不可重复读
- selenium+python实现bilibili视频播放测试
- 基于迅为iMX6开发板烧写Android系统
- Android集成地图+模式切换
- bzoj2132: 圈地计划
- SQL Server中的事务与锁
- 疯狂的AI金融:金融从业者应该知道三个谎言