填移动端坑系列一——如何让h5页面完美整屏显示
原创哟,转载请附上本文连接(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倍;
结论同第一种情况,计算规则都得是容器宽度/图片宽度, 根据放大倍数大的来缩放。
填移动端坑系列一——如何让h5页面完美整屏显示的更多相关文章
- MySQL填坑系列--Linux平台下MySQL区分大小写问题
大家好,我是软件大盗(道),下面开始我们的<MySQL填坑系列>. 笔者最近又在MySQL的边缘试探,然后,试探着,试探着就报错了. 书接上文,系统连接数据库时报错:找不到DB_TIMIN ...
- 入坑第二式 golang入坑系列
史前必读: 这是入坑系列的第二式,如果错过了第一式,可以去gitbook( https://andy-zhangtao.gitbooks.io/golang/content/ )点个回放,看个重播.因 ...
- uni-app学习心得和填坑,关于uni-app 打包h5 页面的坑
第一次使用博客园写博客 1.我写博客的原因,梳理知识,整理思路,好记性不如烂笔头做个记录吧!记录生活! 1.了解 大概在我使用hbuilder的时候,在官网浏览下载的hbuilder时候无意中发现了u ...
- 5分钟搭建wordpress个人博客网站——宝塔傻瓜式部署,无坑系列,附赠主题和md插件[2021-12-31]
一.前言 自从买了服务器,小编已经马不停蹄的学了两天服务搭建的知识,问了很多大佬,快速搭建自己的博客网站.有四种方式,我在这里全部分享给大家.自己已经搭建好,欢迎大家过来看一下,给你提供个思路哈! 小 ...
- gulp入坑系列(2)——初试JS代码合并与压缩
在上一篇里成功安装了gulp到项目中,现在来测试一下gulp的合并与压缩功能 gulp入坑系列(1)--安装gulp(传送门):http://www.cnblogs.com/YuuyaRin/p/61 ...
- 《神秘的程序员们》漫画26~28:《万年坑系列》 I、II、III(转)
26 <万年坑系列> I:那些令你憎恶的系统从何而来? 世界上总有一些令人憎恶的系统,而你却天天非用不可.这些系统的提供方们既不缺钱也不缺人,有的还很热衷于改版升级. 但为何升级完后,它们 ...
- 3-STM32带你入坑系列(自己封装点亮一个灯的库--Keil)
2-STM32带你入坑系列(点亮一个灯--Keil) 首先建一个stm32f103x.h的文件,然后 #include "stm32f103x.h" 还记得上一节 现在呢就是做一个 ...
- 2-STM32带你入坑系列(点亮一个灯--Keil)
1-STM32带你入坑系列(STM32介绍) 首先是安装软件 这一节用Kei来实现,需要安装MDK4.7这个软件,怎么安装,自己百度哈.都学习32的人了,不会连个软件都不会安装吧....还是那句话 没 ...
- shzr要填的各种坑
shzr要填的各种坑 如果大家看到我学了什么算法没写总结,或者做了什么题没写题解,欢迎让我填坑. 计划要写的: [ ] 点分治 [ ] 整体二分 [ ] CDQ分治 [ ] Min-Max容斥 [√] ...
随机推荐
- AngularJS学习 之 安装
1. 安装好Node.js 2. 安装好Git 3. 安装好Yeoman 以管理员身份打开cmd 输入 npm install -g yo 回车即可开始安装Yeoman,具体的安装行为最好看官网的介绍 ...
- 网络I/O模型--02阻塞模式(多线程)
当服务器收到客户端 X 的请求后(读取到所有请求数据后),将这个请求送入一个独立线程进行处理,然后主线程继续接收客户端 Y 的请求. 客户端一侧也可以使用一个子线程和服务器端进行通信.这样客户端主线程 ...
- Vue 框架-06-条件语句 v-if 实现选项卡效果
Vue 框架-06-条件语句 v-if 实现选项卡效果 本片介绍的是 Vue 中条件语句 v-if 第一个小实例是,通过 v-if="布尔值",通过布尔值的真假来决定,某元素是否显 ...
- redis订阅与发布(把redis作为消息中间件)
订阅频道127.0.0.1:6379> subscribe chat1Reading messages... (press Ctrl-C to quit)1) "subscribe&q ...
- apache ftp server的简单入门(java应用内嵌ftp server)
Apache Ftp Server:(强调) Apache Ftp Server 是100%纯Java的FTP服务器软件,它采用MINA网络框架开发具有非常好的性能.Apache FtpServer ...
- 在Windows Server 2012中打开传统的磁盘管理界面
在“运行”中输入diskmgmt.msc即可
- Java对于表达式中的自动类型提升
1 表达式中的自动类型提升: 表达式求值时,Java自动的隐含的将每个byte.short或char操作数提升为int类型,这些类型的包装类型也是可以的. 例如: short s1 = 1; s1 = ...
- Jmeter 测试 JMS (Java Message Service)/ActiveMQ 性能
前言 JMS介绍:JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送 ...
- leetCode之二叉树数中序遍历(递归实现)
1.题目描述 2.分析 对于树来说,由于其结构是递归定义的,所以对二叉树很多算法使用递归是最容易的.反倒是使用循环方式需要借助特殊的数据结构来实现. 3.代码 vector<int> in ...
- C语言高精度乘法
#include <stdio.h> void highPrecision (int N ); ] = {, }, length = ; //开辟一个大的数组,全局变量length记录长度 ...