34. 视口 viewport

视口是浏览器显示页面内容的屏幕区域，我们以京东为例，京东的页面是非常长的

只有我当前显示出来的部分叫做视口（可以理解为可视区域）

视口可以分为 布局视口(layout viewport)、视觉视口(visual viewport)和理想视口（idel viewport）

由于移动端的网页对高度要求是不大的，因为你上下滑动这个动作比较方便（而左右移动却不是很方便）。所以我们后续都使用宽度来解释视口

目录

1  布局视口

2  视觉视口

3  理想视口

4  meta视口标签

---

1  布局视口

布局视口就是你整体网页的宽度

如果你的布局视口远超手机宽度，元素看上去就会很小，一般默认可以通过手动缩放网页(用手捏一下)

我们之前做的品优购就会有这种问题

2  视觉视口

视觉视口是用户正在看到的网站的区域，简单来说就是你手机的宽度

3  理想视口

理想视口是最终要呈现给用户的，当布局视口与视觉视口的宽度一致时，这个网页看着是最顺眼的，比如说京东的移动端网页

想要达成这种效果需要用到meta视口标签

4  meta视口标签

它是这样写的

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

其中涉及到的内容含义如下

如果我们给品优购首页加上标签，那么它就会变成这样

你可以对其上下左右移动，由于做的时候是PC端，所以也就这样了