问题一，分辨率Resolution适配：
不同屏幕宽度，html元素宽高比和字体大小，元素之间的距离自适应，使用rem单位。

问题二，单位英寸像素数PPI适配：
使用rem单位，文字会发虚。段落文字，使用px单位，用media query或js来适配。标题文字可以直接使用rem单位。

问题三，设备像素比例DPR适配：
1物理像素在
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
显示效果不合需求。要根据devicePixelRatio来修改meta标签的scale

参考：
http://www.html-js.com/article/2402
http://isux.tencent.com/web-app-rem.html

https://github.com/amfe/lib.flexible

demo如下：

<!doctype html>

<html>

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title>移动h5自适应布局</title>

    <style>

        /*320px布局*/

        html{font-size: 100px;}

        body{font-size: 0.14rem;/*实际相当于14px*/}

        body{

            padding:0;

            margin:0;

        }

        .div2{

            font-size:0.14rem;

        }

        .div3{

            width:3rem;

            height:3rem;

            border:1px solid #000;

            box-sizing:border-box;

        }

        .div4{

            margin-top:0.1rem;

            width:2rem;

            height:2rem;

            border:1px solid #000;

            box-sizing:border-box;

        }

        .img1{

            width:3.2rem;

        }

    </style>

</head>

<body>

    <div class="div2">动态更改html元素大小</div>

    <div class="div3"></div>

    <div class="div4"></div>

    <img class="img1" src="http://www.baidu.com/img/bdlogo.png" alt="" />

</body>

<script>

// 该代码来自http://www.ghugo.com/mobile-h5-fluid-layout-for-iphone6/

(function (doc, win) {

    // 分辨率Resolution适配

    var docEl = doc.documentElement,

        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

        recalc = function () {

            var clientWidth = docEl.clientWidth;

            if (!clientWidth) return;

            docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';

        };

    // Abort if browser does not support addEventListener

    if (!doc.addEventListener) return;

    win.addEventListener(resizeEvt, recalc, false);

    doc.addEventListener('DOMContentLoaded', recalc, false);

    // 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale,要注释上面的meta标签

    (function(){

        return;

        var dpr = scale =1;

         var isIPhone = win.navigator.appVersion.match(/iphone/gi);

        var devicePixelRatio = win.devicePixelRatio;

        if (isIPhone) {

            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案

            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {

                dpr = 3;

            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){

                dpr = 2;

            } else {

                dpr = 1;

            }

        } else {

            // 其他设备下，仍旧使用1倍的方案

            dpr = 1;

        }

           scale = 1 / dpr;

           //

           var metaEl = "";

           metaEl = doc.createElement('meta');

        metaEl.setAttribute('name', 'viewport');

        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

        if (docEl.firstElementChild) {

            docEl.firstElementChild.appendChild(metaEl);

        } else {

            var wrap = doc.createElement('div');

            wrap.appendChild(metaEl);

            doc.write(wrap.innerHTML);

        }

    })();

})(document, window);

</script>

</html>

移动h5自适应布局的更多相关文章

  1. H5自适应屏幕分辨率大小

    说明: ①:H5自适应不同分辨率的设备,其实主要就一句 <meta name="viewport" content="width=device-width,init ...

  2. 微信小程序新单位rpx与自适应布局

    rpx是微信小程序新推出的一个单位,按官方的定义,rpx可以根据屏幕宽度进行自适应,在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信还捣鼓出新的rpx单位?在解释这个单位前,我 ...

  3. 【转载】rem自适应布局-移动端自适应必备

    原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...

  4. CSS流体(自适应)布局下宽度分离原则——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1463 一.简短的前言 ...

  5. CSS流体(自适应)布局下宽度分离原则

    CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...

  6. css实现九宫格图片自适应布局

    我之前写九宫格自适应布局的时候,每个格子是使用媒体查询器(@media)或者js动态设置css,根据不同的手机屏幕宽度,适配不同手机,但是这样有个很大的缺点,那就是移动端的屏幕尺寸太多了,就得写很多代 ...

  7. 再谈布局，栅栏式自适应布局的学习和实现(calc自适应布局)

    布局真的很重要.一个不好的布局后期会有很多很多的bug,就像是建房子的地基一样. 首先,再一次地圣杯布局的学习,来源于该教程: http://www.jianshu.com/p/f9bcddb0e8b ...

  8. 这可能是史上最全的CSS自适应布局总结教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

  9. css经典布局——头尾固定高度中间高度自适应布局

    转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...

随机推荐

  1. loading等待载入正在加载的动画GIF图片圆形图标

    http://www.wtoutiao.com/p/GdfbdM.html

  2. Linux workqueue疑问【转】

    转自:http://blog.csdn.net/angle_birds/article/details/9387365 各位大神,你们好.我在使用workqueue的过程中遇到一个问题. 项目采用uC ...

  3. test if DEMO

    可参考:http://blog.chinaunix.net/uid-20671208-id-3643362.html 1.test 举例: test -d ~/auto && echo ...

  4. 在CentOS之上搭建VMware Player 7

    1.下载VMware-Player-7.1.2安装包 百度网盘下载地址: 链接:http://pan.baidu.com/s/1nudfo6H 密码:oemc 直接下载地址: https://down ...

  5. 在MyEclipse中搭建Spring MVC开发环境

    环境版本 IDE:MyEclipse 8.5 Spring:spring 3.2.8 JDK:1.6 1.打开MyEclipse-->File-->New-->Web Project ...

  6. PHP stat() 函数 返回关于文件的信息。

    定义和用法 stat() 函数返回关于文件的信息. 语法 fstat(file) 参数 描述 file 必需.规定要检查的文件. 说明 获取由 file 指定的文件的统计信息.如果 file 是符号连 ...

  7. [ios][swift]提示框，并自动消失

    参考: 提示框:http://blog.csdn.net/gishero/article/details/43941361 提示框自动消失:http://www.cnblogs.com/yemingl ...

  8. Servlet基础简单总结(上)

    Servlet基础一些简单总结(上): 1.Java Servlet是运行在Web服务器上的Java程序2.Java平台给Servlet开发者提供了强大的API/面向对象编程平台无关/强类型/垃圾回收 ...

  9. C# .ToString() 格式化

    c# ToString() 格式化字符串  格式化数值:有时,我们可能需要将数值以一定的格式来呈现,就需要对数值进行格式化.我们使用格式字符串指定格式.格式字符串采用以下形式:Axx,其中 A 为格式 ...

  10. jquery的ajax向ashx传值，中文乱码问题

    从网上查找了很多资料: 有在配置文件里面加如下配置 <globalization responseEncoding="utf-8" requestEncoding=" ...