原创哟,转载请附上本文连接(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属性, 能让图片在不拉伸的情况下 最大限度缩放图片以填充容器。

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

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

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

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

第二种情况: 图片需缩小

  1. 若图片宽度400px, 容器宽度200px, 若按宽度缩放,要将图片放大0.5倍;

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

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

填移动端坑系列一——如何让h5页面完美整屏显示的更多相关文章

  1. MySQL填坑系列--Linux平台下MySQL区分大小写问题

    大家好,我是软件大盗(道),下面开始我们的<MySQL填坑系列>. 笔者最近又在MySQL的边缘试探,然后,试探着,试探着就报错了. 书接上文,系统连接数据库时报错:找不到DB_TIMIN ...

  2. 入坑第二式 golang入坑系列

    史前必读: 这是入坑系列的第二式,如果错过了第一式,可以去gitbook( https://andy-zhangtao.gitbooks.io/golang/content/ )点个回放,看个重播.因 ...

  3. uni-app学习心得和填坑,关于uni-app 打包h5 页面的坑

    第一次使用博客园写博客 1.我写博客的原因,梳理知识,整理思路,好记性不如烂笔头做个记录吧!记录生活! 1.了解 大概在我使用hbuilder的时候,在官网浏览下载的hbuilder时候无意中发现了u ...

  4. 5分钟搭建wordpress个人博客网站——宝塔傻瓜式部署,无坑系列,附赠主题和md插件[2021-12-31]

    一.前言 自从买了服务器,小编已经马不停蹄的学了两天服务搭建的知识,问了很多大佬,快速搭建自己的博客网站.有四种方式,我在这里全部分享给大家.自己已经搭建好,欢迎大家过来看一下,给你提供个思路哈! 小 ...

  5. gulp入坑系列(2)——初试JS代码合并与压缩

    在上一篇里成功安装了gulp到项目中,现在来测试一下gulp的合并与压缩功能 gulp入坑系列(1)--安装gulp(传送门):http://www.cnblogs.com/YuuyaRin/p/61 ...

  6. 《神秘的程序员们》漫画26~28:《万年坑系列》 I、II、III(转)

    26 <万年坑系列> I:那些令你憎恶的系统从何而来? 世界上总有一些令人憎恶的系统,而你却天天非用不可.这些系统的提供方们既不缺钱也不缺人,有的还很热衷于改版升级. 但为何升级完后,它们 ...

  7. 3-STM32带你入坑系列(自己封装点亮一个灯的库--Keil)

    2-STM32带你入坑系列(点亮一个灯--Keil) 首先建一个stm32f103x.h的文件,然后 #include "stm32f103x.h" 还记得上一节 现在呢就是做一个 ...

  8. 2-STM32带你入坑系列(点亮一个灯--Keil)

    1-STM32带你入坑系列(STM32介绍) 首先是安装软件 这一节用Kei来实现,需要安装MDK4.7这个软件,怎么安装,自己百度哈.都学习32的人了,不会连个软件都不会安装吧....还是那句话 没 ...

  9. shzr要填的各种坑

    shzr要填的各种坑 如果大家看到我学了什么算法没写总结,或者做了什么题没写题解,欢迎让我填坑. 计划要写的: [ ] 点分治 [ ] 整体二分 [ ] CDQ分治 [ ] Min-Max容斥 [√] ...

随机推荐

  1. 移动端点击输入框,弹出键盘,底部被顶起问题(vue)

    这个问题相信做移动端开发的童鞋会有深刻体会,以前用jq开发时就很头疼这个问题,每次底部footer部分需要用position:fixed,如果页面内容不是很长,没有超出屏幕范围,那就还好,没有问题:一 ...

  2. elixir mac环境

    1.升级brew brew update 2.安装 erlang brew install erlang 3.安装Elixir: brew install elixir 终端 iex iex> ...

  3. CSS 几款比较常用的翻转特效

    第一个:360度翻转特效 <style>* { margin:0; padding:0; } .aa { width: 220px; height: 220px; margin: 0 au ...

  4. 前端 css+js实现返回顶部功能

    描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...

  5. 润乾在jetty应用服务器下的JNDI配置一

     一. 此处绑定的数据源是以 DBCP 为实现.首先必须将数据库驱动(这里用了MYSQL数据库)和DBCP所需要的 Jar 包复制到 Jetty 根目录的 lib 目录下.DBCP主要需要以下3个 ...

  6. linux 挂载命令mount、umount

    mount /bin/mount语法:mount [-t文件系统] 设备文件名 挂载点mount -t iso9660 /dev/sr0 /mnt/cdromiso9660是固定的,光盘:所以 -t ...

  7. canvas动画部分

    requestAnimationFrame(callback) 一个用于制作逐帧动画的函数 //这个函数会在控制台无限输出"----" (function animate() { ...

  8. IIS测试环境搭建

    1.控制面板->程序->程序和功能->打开或关闭Windows功能->Internet信息服务->Web管理工具,打开如下服务: 2.打开IIS管理器 2.1检查.net ...

  9. a标签 按钮化使用

    a标签 按钮化使用 a href="javascript:void(0);" onclick="js_method()" a href="javasc ...

  10. 使用AHKActionSheet

    使用AHKActionSheet https://github.com/fastred/AHKActionSheet 基本配置代码: AHKActionSheet *actionSheet = [[A ...