解决iphonex屏幕过长背景图片或者放在元素里面的图片不能铺满的问题

最新推荐文章于 2024-03-04 12:04:44 发布

原创最新推荐文章于 2024-03-04 12:04:44 发布 · 9.5k 阅读

6 ·

CC 4.0 BY-SA版权

本文介绍四种针对iPhoneX特殊屏幕尺寸的网页设计与适配方案，包括使用JS判断设备并替换图片、利用纯色背景填充空白、通过CSS拉伸图片及使图片铺满全屏的方法。

目前有四种方法

1.让设计单独设计一版iphonex的尺寸的图，用js代码判断设备，如果检测到是iphonex就换图

//如果设备是iphonex则追加元素填补空余
           function isIPhoneX(fn){
           var u = navigator.userAgent;
           var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
           if (isIOS) {
           if (screen.height == 812 && screen.width == 375){
           //是iphoneX
//进行更换适配图片操作
           }else{
           //不是iphoneX
           return;
           }
           }
           }

//检测设备是否是iphoneX
      isIPhoneX();

2.尽量让设计设计图的时候设计成图片下面是纯色的颜色，通过background:url(路径) #000 no-repeat left top;的方式让与图片相同的背景色去填充空白

3.通过以下代码拉伸图片进行竖向铺满，但是缺点是图片被拉长很难看

body{
               margin: 0;
               padding: 0;
               background: url(img/bg.jpg) no-repeat left top;
               background-size: cover;
   background-attachment: fixed;
           }

4.通过以下代码让放在元素中的img铺满整个屏幕

html：

<body>

</body>

css:

#imgWrap{
z-index: 1;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%
}
#imgWrap img{
width:100%;
height:100%;
}