首页 > 分享 > 面试题55：meta、viewport是做什么用的+怎么写

面试题55：meta、viewport是做什么用的+怎么写

花匠小妙招
2024-12-03 18:32

这个标签内的内容表示啥意思呢?

name为viewport表示供移动设备使用. content定义了viewport的属性.

width表示移动设设备下显示的宽度为设备宽度(device-width)

height表示移动设设备下显示的宽度为设备宽度.

user-scalable表示用户缩放能力, no表示不允许.

initial-scale表示设备与视口的缩放比率

maximum和minimum分别表示缩放的最大最小值, 要注意的是, maximum必须必minimum大.

上面的meta标签就是告诉浏览器, 不要在移动端显示的时候缩放.

1. 什么是 meta 标签?

可提供有关页面的元信息

2.移动端适配的目的：

通常我们在pc上看到的页面都是比较大的，在pc上访问页面是正常显示的，默认是不会被缩放的，除非是手动进行了缩放，页面才会被放大比例或者是缩小比例显示。但是在移动端是不一样的，如果将一个pc端的页面放到手机端进行访问，那么可能出现页面挤到一起、布局错乱或者出现横向滚动条的情况，我们给用户带来不好的体验。还有在屏幕尺寸大小不同的手机上进行访问页面时，页面显示的效果不能合理的展示，我们期望的是在手机屏幕较大时显示的内容比较大一些，手机屏幕小的时候页面的内容也会缩小进行自适应。
因此，移动端适配的目的是在不同尺寸的设备上，页面达到合理的展示（自适应）或者说是能够保持统一效果。

3.viewport的基本概念

通常viewport是指视窗、视口，浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。在移动端和pc端视口是不同的，pc端的视口是浏览器窗口区域，而在移动端有三个不同的视口概念：布局视口、视觉视口、理想视口

布局视口：在浏览器窗口css的布局区域，布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或其他值，一般都比移动端浏览器可视区域大很多，所以就会出现浏览器出现横向滚动条的情况

视觉视口：用户通过屏幕看到的页面区域，通过缩放查看显示内容的区域，在移动端缩放不会改变布局视口的宽度，当缩小的时候，屏幕覆盖的css像素变多，视觉视口变大，当放大的时候，屏幕覆盖的css像素变少，视觉视口变小。

理想视口：一般来讲，这个视口其实不是真是存在的，它对设备来说是一个最理想布局视口尺寸，在用户不进行手动缩放的情况下，可以将页面理想地展示。那么所谓的理想宽度就是浏览器（屏幕）的宽度了。

刚开始 web 页面仅仅是在 PC 端进行查看的，但是后来随着移动互联网的发展，越来越多的 web 访问是通过移动端进行的，但是因为 PC 的 viewport 要比移动端大，所以为了快速修复这个问题，移动端的浏览器默认只是把整个页面等比例缩小到移动端的 viewport 大小。

这样做的后果就是，用户看到的是一个缩小版的整个页面，字体、图标和内容等等都非常小，想要点击或者查看都需要去放大页面进行操作，放大页面之后就会出现横向滚动条，这对用户体验来说是非常不好的。

device-width 是指这个设备最理想的 viewport 宽度，移动端的 viewport 宽度会从默认的 980px 变成各个设备的理想 device-width ，device-width 是和 CSS像素（也叫密度独立像素 dip）是相同的（CSS 中的 100% 就等于 device-width ）。也就是说，web 页面中的 CSS像素的值等于 device-width 时，加了这行代码，然后页面的宽度就会跟设备宽度一致，实际上，它就是设置了理想视口，将布局视口的宽度设置成了理想视口（浏览器/设备屏幕的宽度），不同的设备 device-width 是不一样的。