关于HTML5中meta name=“viewport“ 的用法---web前端工作笔记014

移动端的布局不同于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的具体用法之前，我们先搞清楚几个概念。

layout viewport：
- layout viewport 是网页的所有内容，他可以全部或者部分展示给

关于HTML5中meta name=“viewport“ 的用法---web前端工作笔记014相关推荐

link标签中的integrity和crossorigin字段---web前端工作笔记015
可以理解成可以跨域访问的吧. crossorigin: 该枚举属性指定在加载相关图片时是否必须使用CORS.可取的值包括以下两个: - anonymous:会发起一个跨域请求(即包含Origin: ...
html5中3个盒子怎样设置,Web前端开发任务驱动式教程（HTML5+CSS3+JavaScript）任务10 盒子模型及应用.pptx...
第五单元盒子模型任务10 盒子模型及应用学习目标盒子模型的概念掌握边框的设置内边距的设置外边距的设置学习目标了解:利用盒子模型布局网页的优势任务目标实战演练--制作古诗文欣赏网页强化训练--制作散文 ...
深入理解input中的value、name、id的区别和用法——Web前端自学笔记
value:指该控件显示出来的值,是面向用户的.如<input type="button" value="123">这条语句运行出来时,button ...
【详细解读】CSS渐变用法——Web前端系列学习笔记
文章目录线性渐变属性解析实例代码效果图径向渐变属性解析示例代码效果图多学一招:重复渐变线性渐变属性解析通过关键词来确定渐变的方向.默认值为top(从上向下),取值范围是 [le ...
【详解】CSS阴影用法——Web前端系列学习笔记
3. CSS阴影和渐变盒阴影对象选择器 {box-shadow:投影方式|| X轴偏移量|| Y轴偏移量 ||阴影模糊半径 || 阴影扩展半径 ||阴影颜色 } 投影方式:此参数是一个可选值,如果 ...
HTML中可以有多个meta吗,HTML5中meta标签有三个主要属性是什么
HTML5中meta标签有三个主要属性是什么发布时间:2020-10-22 13:46:11 来源:亿速云阅读:88 作者:小新小编给大家分享一下HTML5中meta标签有三个主要属性是什么,相 ...
html中form标签的作用style,HTML5中meta常用标签属性说明
HTML5中meta常用标签属性说明 IE 兼容模式,Bootstrap 不支持 IE 古老的兼容模式.为了让 IE 浏览器运行最新的渲染模式下,建议将此标签加入到你的页面中: content属性 ...
html5中figure怎么用,HTML5中figure和figcaption标签用法
HTML5中figure和figcaption标签一般都是配套使用的,先了解下两者的基本定义,然后结合实例来说明两者的用法. 标签规定独立的流内容(图像.图表.照片.代码等等). figure元素的内 ...
html5中meta标签总结
keywords,description(经常用到的两个) 页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个用 ','号隔开 <meta name="keywords" ...

关于HTML5中meta name=“viewport“ 的用法---web前端工作笔记014

关于HTML5中meta name=“viewport“ 的用法---web前端工作笔记014相关推荐

最新文章

热门文章