浅析HTML5 meta viewport参数


Posted in HTML / CSS onOctober 28, 2020

随着移动端的流行,在移动端对网站进行重构和开发势在必行。但是你只有了解了移动设备的meta viewport参数之后,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。

浅析HTML5 meta viewport参数

viewport是什么?通俗的讲,viewport是用户网页的可视区域。移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,具体来说,就是浏览器上用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。

viewport语法如下:

<meta name="viewport"
content="

height = [pixel_value | device-height] ,

width = [pixel_value | device-width ] , 

initial-scale = float_value ,

minimum-scale = float_value ,

maximum-scale = float_value ,

user-scalable = [yes | no] ,

target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi 

" 

/>

viewport的参数详细信息如下:

width:控制 viewport 的大小,可以指定的一个值或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。

height:和width相对应,指定高度。

initial-scale:初始缩放。即页面初始缩放程度。这是一个浮点值,是页面大小的一个乘数。例如,如果你设置初始缩放为“1.0”,那么,web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”,那么这个页面就会放大为2倍。

minimum-scale:允许用户缩放到的最小比例

maximum-scale:最大缩放。即允许的最大缩放程度。这也是一个浮点值,用以指出页面大小与屏幕大小相比的最大乘数。例如,如果你将这个值设置为“2.0”,那么这个页面与target size相比,最多能放大2倍。

user-scalable:用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变,反之为no。默认值是yes。如果你将其设置为no,那么minimum-scale和maximum-scale都将被忽略,因为根本不可能缩放。

target-densitydpi:一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi)。Android支持三种屏幕像素密度:低像素密度,中像素密度,高像素密度。一个低像素密度的屏幕每英寸上的像素点更少,而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。

其中target-densitydpi的取值范围如下:

device-dpi:使用设备原本的 dpi 作为目标 dp。不会发生默认缩放。

high-dpi:使用hdpi 作为目标 dpi。中等像素密度和低像素密度设备相应缩小。

medium-dpi:使用mdpi作为目标 dpi。高像素密度设备相应放大, 像素密度设备相应缩小。这是默认的target density。

low-dpi:使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。

value:指定一个具体的dpi值作为target dpi。这个值的范围必须在70–400之间。

为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放,你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了,页面将不会缩放。相反,页面会根据当前屏幕的像素密度进行展示。在这种情形下,你还需要将viewport的width定义为与设备的width匹配,这样你的页面就可以和屏幕相适应。

例如:

设置屏幕宽度为设备宽度,禁止用户手动调整缩放:

 <meta name="viewport" content="width=device-width,user-scalable=no" />

设置屏幕密度为高频,中频,低频自动缩放,禁止用户手动调整缩放:

<meta name="viewport" content="width=device-width,
target-densitydpi=high-dpi,

initial-scale=1.0,

minimum-scale=1.0,

maximum-scale=1.0,

user-scalable=no"/>

以上就是浅析HTML5 meta viewport参数的详细内容,更多关于HTML5 meta viewport参数的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
Html5元素及基本语法详解
Aug 02 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 #HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 #HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 #HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 #HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
Oct 19 #HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 #HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 #HTML / CSS
You might like
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
python中的对象拷贝示例 python引用传递
2014/01/23 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
Python当中的array数组对象实例详解
2019/06/12 Python
python对execl 处理操作代码
2020/06/22 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
Yahoo的PHP面试题
2014/05/26 面试题
大学生个人求职信范文
2013/09/21 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
书香校园建设方案
2014/05/02 职场文书
敬老模范事迹
2014/05/21 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
升学宴祝酒词
2015/08/11 职场文书
Golang中异常处理机制详解
2021/06/08 Golang
django中websocket的具体使用
2022/01/22 Python
讲解Python实例练习逆序输出字符串
2022/05/06 Python