您现在的位置： 万盛学电脑网 >> 程序编程 >> 网页制作 >> DivCSS教程 >> 正文
在用HTML5开拓手机应用或手机网页时
作者：佚名 责任编辑：admin 更新时间：2022-06-22
在用HTML5开拓手机应用或页时，<head>部门总会有如下一段代码，这段代码到底什么意思呢。在网上，各人会获得许多谜底。我从网上汇集了部门先容，清算一下，以留备用。
什么是Viewport手机赏识器是把页面放在一个假造的“窗口”（viewport）中，凡是这个假造的“窗口”（viewport）比屏幕宽，这样就不消把每个网页挤到很小的窗口中（这样会粉碎没有针敌手机赏识器优化的网页的机关），用户可以通过平移和缩放来看网页的差异部门。移动版的 Safari 赏识器最新引进了 viewport 这个 meta tag，让网页开拓者来节制 viewport 的巨细和缩放，其他手机赏识器也根基支持。
width：节制 viewport 的巨细，可以指定的一个值，假如 600，可能非凡的值，如 device-width 为装备的宽度（单元为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也等于当页面第一次 load 的时辰缩放比例。
maximum-scale：应承用户缩放到的最大比例。
minimum-scale：应承用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放
“viewport”，翻译为中文可以叫做“视区”，各人都知道移动装备的屏幕一样平常都比PC小许多，webkit赏识器会将一个较大的“假造”窗口映射到移动装备的屏幕上，默认的假造窗口为980像素宽（今朝大部门网站的尺度宽度），然后按必然的比例（3：1或2：1）举办缩放。也就是说当我们加载一个平凡网页的时辰，webkit会先以980像素的赏识器尺度加载网页，然后再缩小为490像素的宽度。留意这个缩小是一个全局缩小，也就是页面上的全部元素城市缩小。如下图所示，一个平凡的文章页面在移动装备的结果：
页面以980像素加载，没有变形，可是按比例缩放后，许多对象用肉眼根基看不清了。
那么我们能不能工钱改变webkit的视区呢？虽然能，在<head>与</head>之间加上如下视区代码：
我们来看看页面加上逼迫视区巨细呼吁后结果怎么样？ 如下图所示：
那么有没有更好的要领呢？好比说我们自动检测移动装备屏幕巨细，然后让内容自顺应。看下面的代码，device-width将自动检测移动装备的屏幕宽度：
参考资料：
(- 上一个程序编程： 热腾12月9日动静 Html5无疑是2011年最热点话题
- 下一个程序编程： 追问：要害是复制不出来答复：你不是用电脑打开的？用电脑复制下
