移动端的布局不同于pc端，首先我们要知道在移动端中，css中的1px并不等于物理上的1px，因为手机屏幕的分辨率已经越来越高，高像素但是屏幕尺寸却没有发生太大变化，那就意味着一个物理像素点实际上塞入了好几个像素。

在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题，所以我们现在还并不能完全信赖这个东西。

还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。

所以在做移动端开发时，为了使移动端的页面在不同的手机上同样的大小来显示，我们可以将页面的宽度固定，然后获取设备的宽度，可以得到我们之前设定的宽度与设备宽度的比例，再使用HTML5新增的viewport来对页面进行缩放，并固定不允许用户再重新缩放。

在看viewport的具体用法之前，我们先搞清楚几个概念。

  1. layout viewport：

    • layout viewport 是网页的所有内容，他可以全部或者部分展示给用户。

  2. visual viewport

    • visual viewport 就是当前显示给用户内容的窗口，你可以拖动或者放大缩小网页。

不太懂的看下图就知道了：

viewport具体用法为: 
使用该meta标签时，在content中写属性，用逗号隔开

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
  • 1
属性名 备注
width 设置layout viewport 的宽度，为一个正整数，使用字符串”width-device”表示设备宽度
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许
– –
target-densitydpi 值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个

最后一个属性为安卓特有，并且安卓已经决定要废弃target-densitydpi 这个属性了，所以这个属性我们要避免进行使用 。

下面我们来看看移动端布局具体的代码：

<head>

<title>Test Page</title>

<script>

    var deviceWidth = parseInt(window.screen.width);  //获取当前设备的屏幕宽度

    var deviceScale = deviceWidth / 640;  //得到当前设备屏幕与640之间的比例，之后我们就可以将网页宽度固定为640px

    var ua = navigator.userAgent;

    //获取当前设备类型（安卓或苹果）

    if (/Android (\d+\.\d+)/.test(ua)) {

        var version = parseFloat(RegExp.$1);

        if (version > 2.3) {

            document.write('<meta name="viewport" content="width=640,initial-scale=' + deviceScale + ', minimum-scale = ' + deviceScale + ', maximum-scale = ' + deviceScale + ', target-densitydpi=device-dpi">');

        } else {

            document.write('<meta name="viewport" content="width=640,initial-scale=0.75,maximum-scale=0.75,minimum-scale=0.75,target-densitydpi=device-dpi" />');

        }

    } else {

        document.write('<meta name="viewport" content="width=640, user-scalable=no">');

    }

</script>

</head>
文

转 关于HTML5中meta name="viewport" 的用法 不同分辨率手机比例缩放的更多相关文章

  1. 理解CSS3中的background－size(对响应性图片等比例缩放)

    理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...

  2. CSS3中的background－size(对响应性图片等比例缩放)

    background-size的基本属性 background-size: 可以设定背景图像的尺寸,该属性是css3中的,在移动端使用的地方很多,比如最常见的地方在做响应性布局的时候,比如之前做的项目 ...

  3. html5之meta标签viewport应用

    在html5移动页面中,viewport定义必不可少. 首先了解下关于viewport的概念: 先了解移动设备的屏幕尺寸和设备尺寸: iPhone3 设备尺寸 320*480 ; 屏幕尺寸  320* ...

  4. HTML5中meta属性大集合

    1.声明文档的字符编码 <meta charset='utf-8'> 2.声明文档的兼容模式 <meta http-equiv="X-UA-Compatible" ...

  5. [转] HTML5中meta属性的使用详解

    meta属性在HTML中占据了很重要的位置.如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等.虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能够熟 ...

  6. HTML5中meta属性

    meta属性在HTML中占据了很重要的位置.如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等.虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能够熟 ...

  7. HTML5中meta属性的使用详解

    meta属性在HTML中占据了很重要的位置.如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等.虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能够熟 ...

  8. <head>中<meta name="viewport" content="width=device-width,initical-scale=1"的作用>

    <meta name="viewport" content="width=device-width,initical-scale=1"的作用> co ...

  9. html5 中meta中 content=width=device-width注意

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

随机推荐

  1. BZOJ4386 [POI2015]Wycieczki 矩阵+倍增

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4386 题解 一眼就可以看出来是邻接矩阵快速幂. 可是这里的边权不为 \(1\).不过可以发现, ...

  2. 线程中的sleep()、join（）、yield（）方法有什么区别？

    sleep().join().yield()有什么区别? sleep() sleep() 方法需要指定等待的时间,它可以让当前正在执行的线程在指定的时间内暂停执行,进入阻塞状态,该方法既可以让其他同优 ...

  3. python写txt文件

    with open('data.txt','w') as f: #设置文件对象 w是重新写,原来的会被抹掉,a+是在原来的基础上写 str0=u"写文件\n" #写中文要在字符串签 ...

  4. js手机号码中间用星号代替。银行卡后四位之外改为星号

    如手机号码13123456789,中间四位用'*'代替 var phone='13123456789' 方法1(字符串的截取): ,)+); 方法2(正则表达式): })\d{}(\d+)/,&quo ...

  5. 一个简单的JSP 连接MySQL使用实例

    一.软件环境 下载并安装MySQL,Tomacat,JDBC.MyEclipse或其他IDE. 二.环境配置 将其环境变量配置好之后,下载Java 专用的连接MySQL的驱动包JDBC,有人会发现在一 ...

  6. 每天一个linux命令：which(17)

    which which命令用于查找并显示给定命令的绝对路径,环境变量PATH中保存了查找命令时需要遍历的目录.which指令会在环境变量$PATH设置的目录里查找符合条件的文件.也就是说,使用whic ...

  7. 重写UIlabel的setText:方法，过滤或者拦截text设置

    因为项目中很多地方都有对UIlabel的赋值,但是text.length == 0 或者为空时并没有去给默认值,导致很多界面空间是白板, 所以不想一个一个去改.希望能重写UIlabel 的setTex ...

  8. （转）教你分分钟搞定Docker私有仓库Registry

    转:https://www.cnblogs.com/Javame/p/7389093.html 一.什么是Docker私有仓库Registry 官方的Docker hub是一个用于管理公共镜像的好地方 ...

  9. DB-概念-数据库：数据库/Database

    ylbtech-DB-概念-数据库:数据库/Database 数据库是以一定方式储存在一起.能与多个用户共享.具有尽可能小的冗余度.与应用程序彼此独立的数据集合,可视为电子化的文件柜——存储电子文件的 ...

  10. 【HTTP】http请求url参数包含+号，被解析为空格

    项目技术:Angular 6 问题现象:接口传参的时候,使用 httpClient.post 方法提交数据,字段中包含+号被解析成空格,提交数据错误 解决过程: 1.http请求中包含+号,会被自动解 ...