iphonex适配

最新推荐文章于 2022-09-14 13:56:04 发布

shooke

最新推荐文章于 2022-09-14 13:56:04 发布

阅读量1.8k

点赞数

分类专栏：移动前端文章标签：前端 iphone

本文链接：https://blog.csdn.net/shooke/article/details/78537674

版权

移动前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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等等。想一下，还是有很多的。不要局限于一种思路，多思考会有更多心得发现

shooke

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
iphonex适配

iphone又一次颠覆了行业，每次都是如此的任性，每次出个问题都要消费者买单。这次最需要买单的是设计师。iphonex这货硬件上出了个留海，软件上又出了个底部手柄。说实话演示起来很酷炫，适配起来就有点苦逼了。下面说集中适配的方案，其实最基本的思路就是避开上下两块区域，只在安全区域显示内容。最简单的方案上下使用固定定位，上面用黑色吧44px高度，固定住，下面呢用34px固定住。内容展示方面body
复制链接

扫一扫