阅读 1580

[ 面试系列 ] - 二:meta viewport 是做什么用的,怎么写?

系列文章

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 是用来做什么的,应该怎么写了。

参考

文章分类
前端
文章标签