浅析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实现地球自转实现代码(图文教程附送源码)
Dec 26 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 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
解决GD中文乱码问题
2007/02/14 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
PHP中echo和print的区别
2014/08/28 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
php中Ctype函数用法详解
2014/12/09 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
浅谈Javascript 数组与字典
2015/01/29 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
python判断变量是否为列表的方法
2020/09/17 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
法国体育用品商店:GO Sport
2019/10/23 全球购物
大学生专科学习生活的自我评价
2013/12/07 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
高中军训感言800字
2014/03/05 职场文书
寄语是什么意思
2014/04/10 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python