meta viewport原理
来源:互联网 发布:js判断数组拼接 编辑:程序博客网 时间:2024/06/06 06:56
HTML中:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。当然maximum-scale=1.0, user-scalable=0不是必需的,是否允许用户手动播放根据网站的需求来定,但把width设为width-device基本是必须的,这样能保证不会出现横向滚动条。
meta viewport 的6个属性:
对于这行代码我们是不是每次都得把这五个属性都写上呢?答案肯定是否定的,例如:如果你添加了user-scalable=no 那么,minimum-scale=1, maximum-scale=1这两个属性就没必要追加了。因为你都已经禁止了用户缩放页面了,允许的缩放范围也就不存在了。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=yes">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
上面这两段代码效果是一样的,都是不允许用户手动缩放页面,只是在原理上有所区别。那么现在问题来了,既然有了user-scalable=no我们也没必要辛苦自己写成minimum-scale=1, maximum-scale=1, user-scalable=yes。
3个viewport
(1)layout viewport——布局视窗
如果把移动设备上浏览器的可视区域设为viewport的话,某些网站会因为viewport太窄而显示错乱,所以这些浏览器就默认会把viewport设为一个较宽的值,比如980px,使得即使是那些为PC浏览器设计的网站也能在移动设备浏览器上正常显示。这个浏览器默认的viewport叫做 layout viewport。layout viewport的宽度可以通过 document.documentElement.clientWidth来获取。
(2)visual viewport——视觉视窗
layout viewport的宽度是大于浏览器可视区域的宽度的,所以还需要一个viewport来代表浏览器可视区域的大小,这个viewport叫做 visual viewport。visual viewport的宽度可以通过 document.documentElement.innerWidth来获取。
(3)ideal viewport——理想视窗
ideal viewport是一个能完美适配移动设备的viewport。首先,不需要缩放和横向滚动条就能正常查看网站的所有内容;其次,显示的文字、图片大小合适,如14px的文字不会因为在一个高密度像素的屏幕里显示得太小而无法看清,无论是在何种密度屏幕,何种分辨率下,显示出来的大小都差不多。这个viewport叫做 ideal viewport。
ideal viewport并没有一个固定的尺寸,不同的设备有不同的ideal viewport。例如,所有的iphone的ideal viewport宽度都是320px,无论它的屏幕宽度是320还是640。
ideal viewport 的意义在于,无论在何种分辨率的屏幕下,针对ideal viewport 而设计的网站,不需要缩放和横向滚动条都可以完美地呈现给用户。viewport设置移动端自适应的方法:
<meta name="viewport" content="width=device-width, initial-scale=1">
- meta viewport原理
- meta -> viewport
- Meta viewport
- html meta viewport
- viewport meta元标签
- meta name="viewport"
- meta 之 viewport
- meta 之 viewport
- meta 之 viewport 小记
- viewport meta tag
- viewport meta标签属性
- meta标签viewport详解
- viewport Meta标签简介
- meta 之 viewport
- <meta>标签之viewport
- meta中的viewport指令
- meta中的viewport指令
- meta标签viewport详解
- 数百种编程语言,而我为什么要学 Python?
- echarts3 map
- 几大运算符重载
- Git分支压缩记录和rebase develop代码
- 章节12 常见问题
- meta viewport原理
- greenplum对hdfs文件的支持
- 声明
- C++试题
- 调整数组使奇数全部都位于偶数前面。
- 如何把Eclipse工程导入到Android Studio
- 实现mybatis多对多功能
- 取消了自动缩进和智能缩进vim
- 【操作系统笔记】第一章