说明：

①：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. 伪装为 吃鸡账号获取器 的QQ木马分析

    本文作者:i春秋作家坏猫叔叔 0×01 起因随着吃鸡热潮的来临,各种各样的吃鸡辅助和账号交易也在互联网的灰色地带迅速繁殖滋生.其中有真有假,也不乏心怀鬼胎的“放马人”.吃过晚饭后在一个论坛看到了这样一 ...

  2. 安装fastdfs文件系统

    1.下载源码包 需要下载的源码包: fastDFS源代码:FastDFS_v5.01.tar.gz fastDFS的nginx模块源代码:fastdfs-nginx-module_v1.15.tar. ...

  3. drf-视图的理解

    1. 类视图 写视图的步骤:      1. 数据库查询,   2. 构建序列化器, 进行序列化操作, 返回数据 一. 两大基类    >1 APIView   (以常规的方法实现get  po ...

  4. 简单介绍RPM包制作方法

    RPM是RedHat Package Manager(RedHat软件包管理工具)的缩写,是一种用于互联网下载包的打包及安装工具,它包含在某些Linux分发版中.它生成具有.RPM扩展名的文件.使用r ...

  5. 线程同步辅助类CyclicBarrier

    CyclicBarrier 是一个可重置的多路同步点,在某些并行编程风格中很有用. 集合点同步:CyclicBarrier 多条线程同时执行一个阶段性任务时,相互等待,等到最后一个线程执行完阶段后,才 ...

  6. let'encript 解决证书问题

    今天服务器let'encript证书过期了,年纪大了老忘,不得不把别人的博客看一遍,就是因为我不想定时任务执行acme_tiny.py,还是写个文档记下,很久不写对外博客了,冒个泡. 1.创建普通域名 ...

  7. Git和Gitlab协同工作

    1.概述 在写这篇博客之前,为了更好的描述整个流程,本人亲自尝试了:从搭建到使用,下面就围绕这个流程来阐述整个过程,目录结构如下所示: Git的安装搭建 Git的常规操作 Gitlab的搭建 Gitl ...

  8. 使用Hexo & Github,搭建属于自己的博客

    经过在网上各种找资料,踩过各种坑,终于搭建好了hexo,直接与gitbub一起使用,搭建起自己的免费的博客. 关于Hexo Hexo是一款基于Node.js的静态博客框架. Hexo特性 风一般的速度 ...

  9. JAR 介绍-百度百科

    JAR(Java Archive,Java 归档文件)是与平台无关的文件格式,它允许将许多文件组合成一个压缩文件.为 J2EE 应用程序创建的 JAR 文件是 EAR 文件(企业 JAR 文件). J ...

  10. [error] 1507#0: *22 FastCGI sent in stderr: "Primary script unknown" while reading response header from upstream, client: 10.0.0.1, server: www.wordpress.com, request: "GET /info.p

    字体比较小,如果你遇到这个问题请仔细的把下面的总结看完. 环境:CentOS6.7.2.6.32-573.el6.x86_64.nginx1.12.2 .php5.5.38 问题:nginx能解析静态 ...