系列文章
meta 标签
要回答这个问题,首先我们要知道什么是 meta 标签:
元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
上面的文字摘自 w3cschool 中文版中对 meta 标签的描述。通过这句话可以知道,meta 标签主要用于描述页面的一些信息。
通过查阅文档,我们可以知道 meta 标签提供三个参数
- name
- http-equiv
- content
- scheme
其中 content 是对另外两者的描述,类似于 json 中键值对的形式,而 scheme 定义用于翻译 content 属性值的格式。
我们来看一个基本的 meta 标签。
<meta name="keywords" content="html,css,javascript,vue">
这个标签描述了网页的关键字有 html,css,javascript 和 vue。
有兴趣详细了解的童靴可以看看这里。
viewport
知道了什么是 meta 标签,我们可以来看看 viewport 了:viewport 是 meta 标签的 name 属性中可选值中的一个,指 web 页面上用户可见的区域,用于移动端页面设计,代码如下:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
当然,很多小伙伴平时可能有使用过这段代码,却没有探究过它的原理:为什么使用了这段代码,就能进行响应式开发了?
要回答这个问题,我们先来看看曾经的前端移动开发面临的困境:
由于一开始的网页主要只是用于在 PC 上展示,所以开发者们并没有过多考虑关于移动端访问的问题,但随着移动端的兴起,越来越多的 Web 访问变成了通过移动端进行的。而由于 PC 端的 viewport 比移动端大,所以为了解决这个问题,浏览器只能的等比的缩小整个页面,导致页面的字体,图片等等都显得非常小,而由于 PC 端的 viewport 是横屏的(宽大大于高),而移动端是竖屏,所以用户放大网页之后还会出现横向的滚动条,这一系列都让用户体验相当不好。 所以为了解决上面的问题,最早由 Apple 在 Safari iOS 中引入了 viewport meta 标签,让Web开发人员控制视口的大小和比例。
让我们再来看看一开始的设置:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
key | mean | example |
---|---|---|
width | 视口的宽度 | width=device-width 指缩放为 100% 时以 CSS 像素计量的屏幕宽度 |
initial-scale | 初始化缩放比例 | initial-scale=1.0 初始化不进行缩放 |
maximum-scale | 用户最大缩放比例 | maximum-scale=1.0 不允许用户缩放 |
看到这,相信你已经明白,meta viewport 是用来做什么的,应该怎么写了。