说明：

①：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. mysql存储过程双重循环示例

    BEGIN ); DECLARE done INT DEFAULT FALSE; DECLARE cursor_rule CURSOR FOR SELECT s.id FROM d_menu_type ...

  2. SpringCloud之Eureka集群

    前面我们介绍了SpringCloud注册中心Eureka,但是存在一个单点故障的问题,一个注册中心远远不能满足实际的生产环境,现在我们介绍一下如何搭建一个Eureka集群. 一:集群环境搭建 我们先建 ...

  3. 【ElasticSearch】：elasticsearch.yml配置

    ElasticSearch5的elasticsearch.yml配置 注意 elasticsearch.yml中的配置,冒号和后面配置值之间有空格 cluster.name: my-applicati ...

  4. lucene使用与优化

    lucene使用与优化 1 lucene简介 1.1 什么是lucene Lucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么拿 ...

  5. Redis---List(链表)

    1. 基本结构 Redis 早期版本存储 list 列表数据结构使用的是压缩列表 ziplist 和普通的双向链表 linkedlist,也就是元素少时用 ziplist,元素多时用 linkedli ...

  6. docker学习实践之路[第四站]利用pm2镜像部署node应用

    拉取keymetrics/pm2-docker-alpine:8镜像 docker pull keymetrics/pm2-docker-alpine: [8]为node镜像的版本号: 建立Docke ...

  7. Nutch抓取流程

    nutch抓取流程注入起始url(inject).生成爬取列表(generate).爬取(fetch).解析网页内容(parse).更新url数据库(updatedb)1:注入起始url(inject ...

  8. C#：使用HtmlAgilityPack解析Html

    推荐阅读: HtmlAgilityPack 入门教程1 HtmlAgilityPack入门教程2 向HtmlAgilityPack道歉:解析HTML还是你好用 获取html中meta标签中的conte ...

  9. Shell 流程控制 if while for

    if else if if 语句语法格式: if condition then command1 command2 ... commandN fi 写成一行(适用于终端命令提示符): if [ $(p ...

  10. java多线程并发控制countDownLatch和cyclicBarrier的使用

    java主线程等待所有子线程执行完毕在执行,这个需求其实我们在工作中经常会用到,比如用户下单一个产品,后台会做一系列的处理,为了提高效率,每个处理都可以用一个线程来执行,所有处理完成了之后才会返回给用 ...