说明：

①：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. C# 生成月份及天选择列表，方便做下拉框联动

    月份及天选择列表,很方便做下拉框联动 /// <summary> /// 获取月份选择列表(根据当前语言环境显示月份名称) /// </summary> private IEn ...

  2. java批量读取多个文件并存入数据库

    有时候服务运行的日志文件,需要统计分析,但数据量很大,并且直接在文件中看很不直观,这时可以将文件中的内容导入到数据库,入库后的数据就可以按照需求进行统计分析了. 这个是以服务器的访问日志作为示例,一个 ...

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

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

  4. app绘制手势密码 、九宫格分解

    什么是九宫格? 即是我们常见的手势绘制.一共有9个点,让我们进行绘制手势.我们手动操作的时候,通过是按住第一个点,然后移动到最后一点,然后松开,就完成手势的操作,那么,如果要用自动化代码,来让其自动绘 ...

  5. JS获取客户端IP地址、MAC和主机名的7个方法汇总

    今天在搞JS(javascript)获取客户端IP的小程序,上网搜了下,好多在现在的系统和浏览器中的都无效,很无奈,在Chrome.FireFox中很少搞到直接利用ActiveX获取IP等的JS脚本. ...

  6. 在matlab中实现PCA算法

    function [V,S,E]=princa(X) [m,n]=size(X); %计算矩阵的行m和列n %-------------第一步:标准化矩阵-----------------% mv=m ...

  7. FactoryMethod工厂方法模式升级成AbstractFactory抽象工厂模式

    具体参考抽象工厂(AbstractFactory)模式-创建型模式,本文在FactoryMethod工厂方法模式(创建型模式)的基础上进行业务进一步抽象,不做详细原理介绍. 1.在FactoryMet ...

  8. CentOS7 配置 Redis单实例

    Redis单实例安装 环境.准备 安装 作为服务启动 启动 1.环境.准备 系统 CentOS7 最小化安装. gcc安装,Make时需要. yum -y install gcc 下载安装包 下载当前 ...

  9. Shell脚本 | 一键卸载安卓App

    在平时工作的过程中,很多重复性内容可以通过运行脚本文件来代替.一次编写,就能带来很大的效率提升. 今天跟大家分享一个简单的 Shell 脚本,只有区区 20 行左右的代码. 因为有时候我们测试某个应用 ...

  10. 精读JavaScript模式(一)

    一.前言 为什么读这本书? 其实做前端开发,一个需求给不同工作经验的人去做,只要完工时间不算苛刻,大家都是能实现的.功能实现虽然大致相同,但当我们回归代码去看实现方式,代码书写的美观程度,以及实现的方 ...