填移动端坑系列一——如何让h5页面完美整屏显示

2022-11-01 17:59:04

原创哟，转载请附上本文连接(http://www.cnblogs.com/AliceX-J/p/6707908.html)，作者印前

后续更简单

前言：

最近让做一个h5的活动专题，便让我浩浩荡荡进入移动端大坑中。

引言：

设计美女做iPhone6的设计图。要求整屏滑动，类似易企秀做的事了。这时我选择了[swiper](http://www.swiper.com.cn/)框架做我的页面滑动。

问题描述：

那么问题来了，如何让这份设计图在不拉伸的情况下完美地在各个移动端设备上整屏呈现呢？

看下图红色框区域，需要我展示完全，又在同一屏中，不能有拉伸，还要适应在各种屏幕尺寸，该怎么呢？？？

摸索插曲：

最开始我想让整张图一起展示，最后我终于惊醒，整张图整屏，是在这样的条件下做不到的。

终于想到换种思路，背景如果是图片，在设计师的沟通下又是可以拉伸的。

    /*背景图片*/

    .bg {

     background: url(xxx.png/jpg) no-repeat;

     background-size: 100%;

    }

现在主要是让内容在不拉伸的情况下，完全展示出来。

现在流行的做法是用rem根据屏幕宽度来进行适配，具体做法原理将在该系列下一部分解释。

这样会导致我的页面内容虽然根据屏幕宽度改变了，但突然发现我的娘娘只剩半截了，其他部分都跑到屏幕下面了。。。

头又大了。。。。。我的娘娘啊。。。。

深究原因

现在集中精神考虑，究竟什么问题导致的呢?

聪明的小伙伴们可能都想到了，我的手机屏幕又不是根据iphone6屏幕宽高按比例放大缩小的。。。。。。嗯，就是它了，原因是不同手机屏幕的宽高比例是不同的。

问题找到了，那么该如何解决呢？？？（穿插点心灵鸡汤，每个人都能发现一些问题，但我们要找到源头想办法解决它！)

解决方案

终于在我经过蹩脚的数学计算后找到一种方法。有更好方法的欢迎联系我哟。

首先观察设计图一屏内容是高度尺寸更长呢？还是宽度的尺寸更长呢？

我们要让更长的得到完美展示，更短的自然也可以同比展现出来，好像是这道理吧，来点三脚猫数学功夫。

iphone6(宽高比) = iphone6Width(375)/iphone6Height(667) =（约等于）0.56

若要让在iphone6的内容完美呈现，应该以该比例来放大缩小。

比如在ipad上，768/1024，它的比例是0.75，此时娘娘就显示不完了。为什么呢？

因为： 根据rem的基础值一般会根据屏幕的宽度和基准iphone的宽度按比例缩放，此时768/375=2.048，那么此时整个页面要放大2.048倍，高度也要放大2.048倍也就是2.048*667=1366.016。

清楚了吗，此时放大后的屏幕尺寸1366.016 > 1024 那么，娘娘的脚就只能在滚动下一屏才能看见了。

那为了露出娘娘的脚，我们该如何缩放呢？

当屏幕宽高比>0.56（iphone6的屏幕宽高比时）我们就得依照iphone6的高度来缩放，缩放比例应该为1024/667(约等于)=1.535，再根据放大1.535得到此时设计图放大后的屏幕宽度1.535*375=575.625。

此时心乱没呢？哎呀，575.625比ipad的宽度768更小的嘛，这时就为整个容器加上padding-left(768-575.625)/2。所有留边居中显示，背景又是满屏填充。我觉得满足要求了。

那么有人会提出疑问了，如果屏幕宽高比<0.56时呢？此时就该根据宽度来缩放啦。。。

最后贴上代码

    //使用jQuery

    var windowHeight = window.innerHeight;

    var windowWidth = $(window).width();

    var screenScale = windowWidth / windowHeight;

    if (screenScale > 0.56){

    	document.documentElement.style.fontSize = windowHeight * 0.56 / 10 + 'px';//设置html font-size基准值

        // 此时计算宽度比实际宽度更小，为使内容居中

    	$('.wraper').css({"padding-left":windowHeight * (screenScale - 0.56)/2});

    }else {

    	document.documentElement.style.fontSize = windowWidth / 10 + 'px';

    }

后续

其实更简单的是 background-size: cover属性，能让图片在不拉伸的情况下最大限度缩放图片以填充容器。

我觉得原理更自己折腾出来的类似，但有另一种更易理解的方式解释：

第一种情况：图片宽高都需放大

若图片宽度为400px，容器宽度为500px, 若按宽度缩放，要将图片放大1.25倍；
若图片高度为200px, 容器高度为400px, 若按高度缩放，要将图片放大2倍；

显然若按图片宽度缩放，那不能将图片放大至填充满整个容器。结论就是哪条边放大倍数更大，即按此倍数缩放整张图片。

第二种情况：图片需缩小

若图片宽度400px, 容器宽度200px, 若按宽度缩放，要将图片放大0.5倍；

2.若图片宽度200px, 容器宽度为150px,若按高度缩放，要将图片放大0.75倍；

结论同第一种情况，计算规则都得是容器宽度/图片宽度, 根据放大倍数大的来缩放。

码农公寓