浅析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 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
巧用CSS3 border实现图片遮罩效果代码
Apr 09 HTML / CSS
css3 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
Aug 28 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
PHP4实际应用经验篇(9)
2006/10/09 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
javascript回调函数详解
2018/02/06 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
python+opencv轮廓检测代码解析
2018/01/05 Python
快速了解Python相对导入
2018/01/12 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
如何教少儿学习Python编程
2020/07/10 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
物理专业本科生自荐信
2014/01/30 职场文书
党委领导班子整改方案
2014/09/30 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js