html 构建响应式网站之viewport的使用
在网页代码的头部，加入一行viewport元标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1" /> //viewport 元标签
...
</head>
...
viewport是网页默认的宽度和高度
上面这行代码的意思是：网页宽度默认等于屏幕宽度（width=device-width）
原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
viewpoint说明
- width 控制viewpoint的宽度，可以是固定值，也可以是device-width，即设备的宽度
- height 高度
- initial-scale 控制初始化缩放比例，1.0表示不可以缩放
- maximum-scale 最大缩放比例
- minimum-scale 最小缩放比例
可见如果不定义viewpoint的话，页面宽度以屏幕分辨率为基准，而设置以后可以根据设备宽度来调整页面，达到适配终端大小的效果
什么是Viewport?
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。
感谢关注
