一、前言

昨天唠叨了哈没用的，今天说点有用的把。先说一下响应式布局吧，我一直认为响应式布局的分项目，一下布局简单得项目做响应式还是可以可以得。例如博客、后台管理系统等。但是有些会认为响应式很牛逼，尤其是在不懂前端的人眼中，一味的追求响应式布局，我觉得复杂的布局项目做响应式还不如做二套样式，因为响应式的样式混在一起真的维护起来是恨费劲的。可能我说的不对，但是发表 一点点自己的看法。说道这里就想说一下移动端的布局，有很多人就是想把手机端得程序兼容ipad，我就觉得这个很不可思议为什么要这么做得，命名手机端的和ipad的设计模式以及操作样式都不一样。为什么还要把它们弄做一起的，维护起来的比较麻烦。还不如做成两套样式或者ipad直接让pc来兼容。pc的设计方式和ipad还是比较接近的。如果非要用移动的样式稍加改成ipad，个人感觉这种方案极不好。不知道大家的看法如何？

接下来我就说一下布局方式吧，目前比较流行的布局方案就是百分表啦。貌似百分之九十以上得触屏版都是这么做得，这种做法可以说是不会出现什么大问题，但是也会有几个小的问题，例如屏幕大的手机和比屏幕小差距之大，尤其是在比价斤斤计较的设计面前你是无法说清楚的，她会一直问，为什么这两个手机的布局差距这么大呢？其实我想说，我他妈怎么跟你解释呢。。。此处省略1000个字。在就是布局起来也比较麻烦，真心麻烦。当然肯定有更好得方案拉，于似乎我就想出了一个比较好的解决方案，顶宽布局。

二、320定宽布局

当时我也想了很多方法，但是一直没有好的解决方案，曾经看了plums的一篇这个博客,当时看完哇塞，这不是正式我想要的嘛。可是尝试了多次发现这个方法的兼容性有很大的问题。最后还是放弃拉。于是乎我就开始琢磨，怎么才能更好得兼容所有的机子呢。就想到了缩放，viewport不就干这个的嘛。二话不说就尝试一下viewport里面得一个属性initial-scale,思想很简单，在页面渲染的时候我计算一下手机的宽度，然后我在跟我顶宽布局的宽度一做比较。那么不就可以实现了自动缩放嘛。可是我尝试的结果是，日的，这个属性各个浏览器支持不好。其实我觉得如果这个属性大家都能统一的支持，那就是完美的解决方案拉。可是谁让我们是程序猿呢。只要靠自己吧，要不然jquery也不会诞生。我们就是要在一个个坑中走过来呀。

接着就想到了scale哈哈，css3里面得缩放，不过后来发现用这个字体什么的会虚掉。所以想起了zoom属性，从这可以看出来我也是干过pc的，当时的ie6的清楚浮动有一种方式就需要加一个zoom为0，这个就不错嘛。话说回来了。这个在nativeapp里还是没有太大问题得。不过还是有一点小坑，就是计算margin以及scroll的时候就出来个缩放系数的问题。不过还好，只要你把常用的组件写好除以或者乘以这个缩放系数就可以搞定啦哈哈。这种方式就可以解决小伙伴们百分比布局的痛苦拉。尤其是不用去计算那些百分值多少百分值多少拉。废话不说啦，上代码，

1<!DOCTYPE html> 2<html> 3<head> 4<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 5<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 6<meta name="format-detection" content="telephone=no"/> 7<title>GreatBoy</title> 8<style> 9/*-----css Reset end-----*/10 body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{11 margin:0;12 padding:0px;13}14 body{15 font-family: "Arial";16 font-size: 100%;17 margin: 0px auto;18 display: none;19}20 #wrapper{21 width:320px;22 margin: 0px auto;23 position: relative;24}25/*-----css content start-----*/2627 .nav img{28 width:100%;29 display: block;30}3132</style>33</head>34<body>35<div id="wrapper">36<div class="nav"><img src="http://p1.jmstatic.com/banner/75/mobile_app/24326_0.jpg"/></div>37<div id="container">38<div id="user">用户信息<span id="userinfo"></span></div>39</div>40</div>41<script>42 (function() {

43var scale =1,

44 $wrapper = document.getElementById(‘wrapper‘),

45 $body = document.getElementsByTagName(‘body‘)[0],

46 windowWidth = document.documentElement && document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth,

47 windowHeight = document.documentElement && document.documentElement.clientHeight || documentElement.body.clientHeight || window.innerHeight,

48 deviceAgent = navigator.userAgent.toLowerCase(),

49 setScale =function(scales) {

50if ($wrapper.style.zoom === undefined) {

51 $wrapper.style.margin =‘0px‘;

52 $wrapper.style.transformOrigin =‘top left‘;

53 $wrapper.style.transform =‘scale(‘+ scales +‘)‘;

54 $wrapper.style.MozTransformOrigin =‘top left‘;

55 $wrapper.style.MozTransform =‘scale(‘+ scales +‘)‘;

56 } else {

57 $wrapper.style.zoom = scales;

58 }

59 $body.style.display =‘block‘;

60 }

6162try {

63if (deviceAgent.match(/(iphone|ipod|android|windows\s*phone|symbianos)/)) {

64if (window.localStorage && window.localStorage.getItem(‘scale_jumei‘)) {

65 scale = window.localStorage.getItem(‘scale_jumei‘);

66 } else {

67 scale = parseFloat(windowWidth /320);

68if (windowHeight > windowWidth) {

69 window.localStorage && window.localStorage.setItem(‘scale_jumei‘, scale);

70 }

71 }

72//微信2.3版本的处理(2.3版本有一个bug就是获取宽度不准确)73if (deviceAgent.match(/android\s*2.3/) && deviceAgent.match(/micromessenger/)) {

74 scale =1;

75 }

76if ($wrapper) {

77 setScale(scale);

78 }

79 }

80 } catch (e) {

81 scale = parseFloat(windowWidth /320);

82if ($wrapper) {

83 setScale(scale);

84 }

85 }

86 })();

87</script>88</body>89</html>

上面代码很简单大家一看就懂。这种方式做一个简单的页面以及平时做些活动啥得是没问题的。也不需要在算百分比是多少啦，直接写死宽度320布局就好啦，先说一下我得布局方式，就是让设计做640的图片。然后我们布局按照320来做就好，图标什么的让设计出2x图或者3x图，也就是做2倍icon或者3倍icon。2倍的icon目前在6plus上面还是会有点虚得。所以可以选择3倍的icon，毕竟图标什么的也不是太大。说一下这种方法的缺点吧。缺点是有的浏览器不支持zoom属性，例如火狐，那就只能用scale了。还有一个缺点就是在计算某些元素的高度什么需要一个缩放系数的问题。毕竟有缩放的东西在里面。当然坑还是有解决方案的，下面就说一下我的顶宽布局最终解决方案。

三、顶宽布局之最终解决方案

为了解决上面布局的坑，我就弄了一个终极的解决方案，这个方案目前肯定也有一定的坑，不过貌似不是很大，毕竟没有太多的人反馈。上面的方案也用了很久，目前没有特别大得问题，尤其是在我们app里面没有出现过重大事故。

接着说一下最终方案，就是通过font-size缩放，这需要用到一个rem的尺寸，大家没事网上一搜就知道了。这个1rem目前等于16px，那么我上面的320布局岂不是可以搭建成宽度为20rem的尺寸，然后我里面所有的元素都可以用rem来代替px。这样我不就可以通过在html上font-size进行缩放了嘛,其实就是这样做的就ok。这里有一个转换，就是要把css里面的px按照1rem = 16px的规则都替换成rem。这样就ok了。这个方案目前的缺点就是需要编译一下css样式和不允许你写内联样式，不允许写内联样式的主要原因是要不你html也得进行编译替换拉。目前我们得解决方案是在开发的时候我们还是按照320的布局方案来走。等发布到线上的时候做一个整体的gulp构建px替换成rem。于似乎就解决了大部分得问题。目前这个解决方案对我来说还是比较理想的。可能某些地方还有问题。不过也算一种尝试吧，有什么问题大家可以一起解决。好了上一个段代码

1<!DOCTYPE html> 2<html> 3<head> 4<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 5<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 6<meta name="format-detection" content="telephone=no"/> 7<title>GreatBoy</title> 8<style> 9/*-----css Reset end-----*/10 body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{11 margin:0;12 padding:0px;13}14 html{15 display: none;16}1718 .nav img{19 width:10rem;20}2122</style>23</head>24<body>25<div class="nav"><img src="http://p1.jmstatic.com/banner/75/mobile_app/24326_0.jpg"/></div>26<div id="container">27<div id="user">用户信息<span id="userinfo"></span></div>28</div>29<script>30 (function(win) {

31var doc = win.document,

32 scale =16,

33 $body = doc.getElementsByTagName(‘body‘)[0],

34 $html = doc.getElementsByTagName(‘html‘)[0],

35 windowWidth = doc.documentElement && doc.documentElement.clientWidth || doc.body.clientWidth || win.innerWidth,

36 windowHeight = document.documentElement && document.documentElement.clientHeight || documentElement.body.clientHeight || window.innerHeight,

37 deviceAgent = navigator.userAgent.toLowerCase();

38if ( deviceAgent.match( /(iphone|ipod|ipad|android|windows\s*phone|symbianos)/ ) ) {

39try{

40if ( window.localStorage && window.localStorage.getItem(‘scale_greatboy‘) ) {

41 scale = window.localStorage.getItem(‘scale_greatboy‘);

42 } else {

43 scale = parseFloat(windowWidth *16/320);

44if (windowHeight > windowWidth) {

45 window.localStorage && window.localStorage.setItem(‘scale_greatboy‘, scale);

46 }

47 }

48 }catch(e){

4950 }

51if (deviceAgent.match(/android\s*2.3/) && deviceAgent.match(/micromessenger/)) {

52 scale =16;

53 }

54 $html.style.fontSize = scale +‘px‘;

55 $html.style.display =‘block‘;

56 } else {

57 window.onresize =function(){

58 windowWidth = doc.documentElement && doc.documentElement.clientWidth || doc.body.clientWidth || win.innerWidth;

59 scale = parseFloat(windowWidth *16/320);

60 $html.style.fontSize = scale +‘px‘;

61 };

62 scale = parseFloat(windowWidth *16/320);

63 $html.style.fontSize = scale +‘px‘;

64 $html.style.display =‘block‘;

65 }

66 $body.style.width =‘20rem‘;

67 })(window);

68</script>69</body>70</html>

总结一下，这个解决方案目前的缺点。1、css需要编译。2、动态计算的时候一定不要把js里的高度宽什么的写死，一定要动态获取。3、在不支持rem的浏览器上会有问题。 目前这也是我想到的最好得解决方案，由于技术水平比较低哈哈。所以代码质量不高，有什么问题大家可以一起交流讨论，如果上面代码大家有疑惑可以看一下线上的页面原代码，点击这里，对啦看淘宝的源代码，貌似淘宝的首页是用fontsize缩放解决的。不过没有看到他们是怎么计算的，有空研究一下。不过我觉得淘宝首页这个自己实现的滚动条还是比较牛，至少在我们公司领导是不允许这么实现的，因为小米3的android机子看了一眼还是会卡顿。。。。太晚了，要去睡觉啦，如果有错别字什么的大家见谅（语文功底比较差哈哈）。

移动端H5---页面适配问题详谈（一）的更多相关文章

  1. 教你如何用 lib-flexible 实现移动端H5页面适配

    前话 好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...

  2. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  3. [转]:移动端H5页面高清多屏适配方案

    原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...

  4. vue移动端h5页面根据屏幕适配的四种方案

    最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...

  5. 解惑好文：移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  6. 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

    基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...

  7. 【原】让H5页面适配移动设备全家 - 前端篇 - PPT

    7月份在部门内给设计中心的同事们带来<让H5页面适配移动设备全家 - 设计师篇 - PPT>的分享,在视觉和交互稿上提出页面适配的建议及提升页面体验的好处,促进前端和设计双方更好的合作,同 ...

  8. 【原】让H5页面适配移动设备全家 - 设计师篇 - PPT

    上一篇文章<pageResponse - 让H5适配移动设备全家>中分享了一个小插件让一套H5页面适配几乎所有移动设备,得到了一些同学的推荐和认可,这里感谢大家的支持. 在此之前也在部门前 ...

  9. 移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml

    机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...

  10. 移动端h5页面的设计稿尺寸

    当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...

随机推荐

  1. 看上去很美 国内CDN现状与美国对比

    CDN的理想与现实 多年以前,当<Kingdom of Heaven>这部史诗电影发行的时候,中国的影迷使用电驴和BT来寻找种子,而那个时候,高清也才刚刚进入电影领域,我的同事不惜用自家的 ...

  2. DiskGenius无损调整分区大小

    一般情况下,调整分区的大小,通常都涉及到两个或两个以上的分区.比如,要想将某分区的大小扩大,通常还要同时将另一个分区的大小缩小:要想将某个分区的大小缩小,则通常还要同时将另一个分区的大小扩大.    ...

  3. osgi:设置httpservice端口号

    使用osgi开发http类的Service,在启动时默认端口是80.但有可能这个端口已经被本机上的其他程序占用.那么解决问题的方法有两种:1)关闭或修改占用程序的端口: 2)修改osgi启动时的端口. ...

  4. Django数据模型及操作

    转自:http://blog.sina.com.cn/s/blog_a73687bc0101cygy.html (一) 初始化测试运行环境 import os; import sys; sys.pat ...

  5. Dbvisualizer9.0.6 解决中文乱码

    一.设置编辑器的编码 Tools->Tools Properties ->General->File Encoding 设置为UTF-8 二.如果数据库为UTF-8,则要在连接时做以 ...

  6. 微信公众号开发第六课 BAE结合实现迅雷账号随机分享

    迅雷离线是个好东西,那么我们能不能实现这样一个功能,回复迅雷,随机返回一个迅雷账户和密码. 首先在t_type类型表中添加 迅雷以及对应用值xunlei,这样返回的case值中对应值xunlei. 建 ...

  7. oo智慧

    单一职责:学 寝室不能学习,学习要去教室 开闭原则:美 爱美穿衣打扮是扩展 整容是修改,修改有风险,所以对扩展开放,对修改封闭 里氏替换:死 人会死,你是人,你会死 依赖倒置:钱 一切向钱看,钱是抽象 ...

  8. Lua和C语言的交互——C API

    Lua可作为扩展性语言(Lua可以作为程序库用来扩展应用的功能),同时也是个可扩展的语言(Lua程序中可以注册由其他语言实现的函数). C和Lua交互的部分称为C API.C API是一个C代码与Lu ...

  9. 【.Net底层剖析】2.stfld指令-给对象的字段赋值

    .Net底层剖析目录章节 1.[深入浅出.Net IL]1.一个For循环引发的IL 2.[.Net底层剖析]2.stfld指令-给对象的字段赋值 3.[.Net底层剖析]3.用IL来理解属性 引言: ...

  10. Appium移动自动化测试（三）--安装Android模拟器

    当Android SDK安装完成之后,并不意味着已经装好了安装模拟器.Android系统有多个版本,所以我们需要选择一个版本进行安装. 第三节  安装Android 模拟器 我这里以Android 4 ...