CSS中meta标签的viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0">

content的6个属性width:可视区域的宽度，值可为数字或关键词device-widthheight:可视区域的高度，值可为数字或者关键词device-heightintial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。user-scalable:是否可对页面进行缩放，no 禁止缩放

一、viewport的概念

移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。

二、css中的1px并不等于设备的1px

在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。

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

更多详情可参考：https://blog.csdn.net/u012402190/article/details/70172371

CSS中meta标签的viewport相关推荐

HTML中可以有多个meta吗,HTML5中meta标签有三个主要属性是什么
HTML5中meta标签有三个主要属性是什么发布时间:2020-10-22 13:46:11 来源:亿速云阅读:88 作者:小新小编给大家分享一下HTML5中meta标签有三个主要属性是什么,相 ...
css中a标签中去掉下划线注意事项
需求文件 css中a标签中去掉下划线注意事项对于css中a 标签去掉下划线有一个注意事项代码如下: <!DOCTYPE html> <html><head>< ...
html中div不在火狐居中,Firefox嵌套CSS中div标签居中问题解决方法
本文和大家重点讨论一下Firefox嵌套CSS中div标签的居中问题的解决方法,主要包括使用line-height垂直居中,清除容器浮动,不让链接折行,始终让Firefox显示滚动条等内容. Fire ...
CSS 中 a 标签为什么不能继承父类的颜色？
CSS 中 a 标签为什么不能继承父类的颜色? 嗯,我知道在这么好的环境下,问这么Low的问题太der,但是不弄明白心里痒痒,只能出此下策. 问题是这样的: HTML: <div>< ...
css中a标签超链接在新窗口中打开以及超链接去除/添加下划线
css中a标签超链接属性设置超链接基本语法: <a href="http://www.baidu.com">点击我会跳转到百度</a> a标签默认颜色为蓝 ...
css中style怎么用,css中style标签的使用方法
css中style标签的使用方法发布时间:2020-07-01 09:49:22 来源:亿速云阅读:141 作者:Leah 这篇文章将为大家详细讲解有关css中style标签的使用方法,文章内容质 ...
JSP中meta标签之详解
JSP中meta标签之详解 2013年01月26日 16:09:27 阅读数:5589 JSP标签 <meta.....>作用总结 <metahttp-equiv="pra ...
css中table标签详解(一)
css中table标签详解(一) 什么是table标签,以及table标签的组成? 不叨叨,直接上代码 <table><tr><td></td>< ...
html中meta标签
html中meta标签 html中meta标签 meta标签的作用 http-equiv/content name/content charset 练习在Begin - End区域内补充代码参考答 ...

CSS中meta标签的viewport

CSS中meta标签的viewport相关推荐

最新文章

热门文章