说明：

①：H5自适应不同分辨率的设备，其实主要就一句

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

width=device-width 屏幕宽度；initial-scale=1 原始缩放比例为1，即100%铺满；minimum-scale=1 最小缩放比例为1；maximum-scale=1 最大缩放比例为1；user-scalable=no 禁止页面缩放。有些浏览器支持不一样，所以若想禁止缩放，就把最大最小缩放比例设为1即可！

②：字体单位使用rem，尽量不使用px，rem能等比适应所有屏幕。使用rem的优缺点，有详细介绍 http://isux.tencent.com/web-app-rem.html

③：dpr分屏，动态修改meta标签内容

下面试代码，有详细注释

<!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;  /*根字体100px, 即1px = 0.01rem*/}

        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,

        //判断浏览器是否支持orientationchange改变方向的函数

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

        recalc = function () {

            //客户端窗口的(逻辑)宽度，逻辑像素=物理像素/2  如:iphone6 (750/2=375)

            var clientWidth = docEl.clientWidth;

            if (!clientWidth) return;

            // 把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果  由rem转换到px

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

        };

    // 如果浏览器不支持addEventListener函数就终止

    if (!doc.addEventListener) return;

    //addEventListener()多次绑定同一事件 参数(事件名，要执行的函数，处理程序的阶段)

    //如果浏览器不支持orientationchange改变方向的函数，则返回resize，会执行recalc函数

    win.addEventListener(resizeEvt, recalc, false);

    //绑定浏览器缩放与加载时间

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

                 /*dpr分屏，动态修改meta标签内容*/

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

    (function(){

        return;

        var dpr = scale =1;

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

         //获取到当前设备的dpr

        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;

           // js动态写meta标签

           var metaEl = "";

           metaEl = doc.createElement('meta');

           //设置viewport,进行缩放，达到高清效果

        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. delphi 窗体自适应屏幕分辨率

    delphi 窗体自适应屏幕分辨率 这是个困惑我很长时间的问题,到今天终于得到解决了. 话说Delphi有个很强的窗体设计器,这一点让VC粉丝垂涎三尺而不可得.但是,Delphi里设计的窗体并没有自动 ...

  2. #region 自适应屏幕分辨率

            #region 自适应屏幕分辨率 [StructLayout(LayoutKind.Sequential, CharSet = CharSet.Auto)]        public ...

  3. Unity3D NGUI自适应屏幕分辨率（2014/4/17更新）

    原地址:http://blog.csdn.net/asd237241291/article/details/8126619 原创文章如需转载请注明:转载自 脱莫柔Unity3D学习之旅 本文链接地址: ...

  4. jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)

    一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...

  5. 手机网页H5 自适应不同分辨率的屏幕 必学标签meta之viewport

    viewport 语法介绍 <meta name="viewport"content=" height = [pixel_value | device-height ...

  6. Delphi：窗体自适应屏幕分辨率的改进

    在窗体依据屏幕分辨率自适应调整尺度方面,昨天的工作可以说是一个突破点.昨天的工作找到了长期以来我的原有方案的问题所在,这是非常关键的.但是昨天晚上的解决方案并不完美,今天的这个才是比较完美的解决版. ...

  7. Unity NGUI根据高度自适应屏幕分辨率

    Unity版本:4.5.1 NGUI版本:3.6.5 本文内容纯粹转载,转载保留参考链接和作者 参考链接:http://blog.csdn.net/asd237241291/article/detai ...

  8. RS报表自动适应屏幕分辨率大小

    问题:同一个报表,由于用户电脑显示器大小,分辨率大小不同显示的不一样,看起来不完整或者很不协调 原因:设计报表大小属性的时候使用了固定值属性,比如限制为宽:1200px 那么在电脑屏幕小分辨率很小的情 ...

  9. NGUI自适应屏幕分辨率

    unity官方承诺的新ui系统一直没有推出来,我们的UI使用的是原生的OnGUI系统,刚好UI需要改版,索性就想迁到NGUI上面来,于是看了一下NGUI源码,发现NGUI可以大大的降低DrawCall ...

随机推荐

  1. 记一次线上事故的JVM内存学习

    今天线上的hadoop集群崩溃了,现象是namenode一直在GC,长时间无法正常服务.最后运维大神各种倒腾内存,GC稳定后,服务正常.虽说全程在打酱油,但是也跟着学习不少的东西. 第一个问题:为什么 ...

  2. Ms17-010进行WEB提权之实践下某培训靶机服务器

    前言:该机器为某个其他培训机构的靶机,说实话在这里没炫耀啥,只是给各位学习Ms17010的同学指一条路,我原先也折腾这玩意儿好久,但是就是不行,最近才找到了出路,所以多写两篇文章,把各种需要注意的地方 ...

  3. SpaceSyntax【空间句法】之DepthMapX学习：第三篇 软件介绍与一般分析流程图

    上篇讲啥来着?好像讲了数据的输入以及一些核心的概念.这篇讲软件长什么样,做那几种分析的步骤如何. 博客园/B站/知乎/CSDN @秋意正寒(我觉得这一篇肯定很多盗图的,那么我在版头加个本篇地址吧)ht ...

  4. 安装eclipse启动时报错

    1.在安装eclipse后,点击exe文件时,提示出现错误,记录在log文件中,因为log文件就是日志文件,可以方便我们排查错误,打开log文件,可以看到文件记录了每次出错的时间和错误栈信息,最新一次 ...

  5. 使用 IntelliJ IDEA 导入 Spark 最新源码及编译 Spark 源代码（博主强烈推荐）

    前言   其实啊,无论你是初学者还是具备了有一定spark编程经验,都需要对spark源码足够重视起来. 本人,肺腑之己见,想要成为大数据的大牛和顶尖专家,多结合源码和操练编程. 准备工作 1.sca ...

  6. 【转】28个Unix/Linux的命令行神器

    下面是Kristóf Kovács收集的28个Unix/Linux下的28个命令行下的工具(原文链接),有一些是大家熟悉的,有一些是非常有用的,有一些是不为人知的.这些工具都非常不错,希望每个人都知道 ...

  7. 如何测试你给客户端app开的接口

    这里介绍一款工具用于测试后台给客户端开的接口. 采用http或者https 采用表单或者json格式 这款工具之前是谷歌浏览器的一款插件,后来出现了各个平台的客户端.非常实用. 名叫postman 官 ...

  8. java操作特殊字符需要注意的点

    在使用字符串替换,分离时 我们如果想替换一个字符串中的问号,我们就不能直接写问号,而要写[?] 实例如下 str = str.replaceAll("\""," ...

  9. TensorFlow object detection API应用

    前一篇讲述了TensorFlow object detection API的安装与配置,现在我们尝试用这个API搭建自己的目标检测模型. 一.准备数据集 本篇旨在人脸识别,在百度图片上下载了120张张 ...

  10. mysql添加用户、修改权限，修改登录权限ip

    1.添加用户 1.1 登录MYSQL: @>mysql -u root -p @>密码 1.2 创建用户: 格式:grant select on 数据库.* to 用户名@登录主机 ide ...