Viewport是用户网页的可视区域,翻译为中文可以叫做”视区”。手机浏览器是把页面放在一个虚拟的”窗口”(Viewport)中,通常这个虚拟的”窗口”(Viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。在网页的head部分设置一个Viewport标签之后,我们可以通过css来实现页面的自适应。
设置Viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素);
- height:和 width 相对应,指定高度;
- initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例;
- maximum-scale:允许用户缩放到的最大比例;
- minimum-scale:允许用户缩放到的最小比例;
- user-scalable:用户是否可以手动缩放。
@media实现自适应
使用min-width时,小的放上面大的在下面;如果是用max-width那么就是大的在上面,小的在下面,使用min-width时的css布局如下:
@media (max-width:1280px) { }
@media (max-width:1024px) { }
@media (max-width:768px) { }
@media (max-width:568px) { }
使用max-width时的css布局如下:
@media (max-width:1280px) { }
@media (max-width:1024px) { }
@media (max-width:768px) { }
@media (max-width:568px) { }
针对苹果手机的特殊设置
苹果系列手机,在输入框获取焦点时,会对页面定位并且放大,但失去焦点后并不会按比例缩下,这就导致用户输入内容后,退出输入状态时页面的显示不完整。这种情况下我们可以考虑关闭这个功能,关闭苹果缩放屏幕,也可以采用设置Viewport的方式:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">