设置视口是确保网页在移动设备正确显示的关键。通过标签可控制页面宽度、缩放比例等，常见参数包括width=device-width使页面宽度匹配设备屏幕，initial-scale=1.0设定初始缩放为1，maximum-scale和minimum-scale限制缩放范围，user-scalable=no禁用用户缩放。使用时需避免固定宽度值、谨慎禁用缩放，并考虑高分辨率屏适配。
设置视口（viewport）是网页在移动设备上正确显示的关键一步，而<meta viewport>标签就是用来控制这个设置的。它直接影响页面在手机或平板浏览器中的缩放行为和布局表现。
什么是视口？
简单来说，视口就是用户在设备屏幕上能看到的网页区域大小。不同设备屏幕尺寸不同，为了让网页在各种设备上都能正常显示，就需要通过视口设置来告诉浏览器怎么处理页面的宽度和缩放比例。
<meta viewport>的作用
<meta viewport>是一个HTML标签，通常写在网页的部分，用于控制网页在移动设备上的显示方式。它能指定页面的初始缩放比例、最大/最小缩放级别、是否允许用户手动缩放等。
立即学习“前端免费学习笔记（深入）”；
最常见的写法是：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这段代码的意思是：让页面的宽度等于设备的屏幕宽度，并且初始缩放比例为1.0，也就是不缩放。
如果不加这个标签，很多手机浏览器会用一个默认的视口宽度（比如980px），然后把整个页面缩小来适应屏幕，这样文字和按钮就会变得很小，用户需要手动放大才能看清楚。
常见的几个参数说明
-
width=device-width：将页面的宽度设为设备的屏幕宽度（单位是CSS像素）。 -
initial-scale=1.0：页面初次加载时的缩放比例。 -
maximum-scale=1.0和minimum-scale=1.0：限制用户可以缩放的最大和最小比例。 -
user-scalable=no：禁止用户手动缩放页面（有些网站为了防止误操作会使用这个）。
举个例子，如果你做一个移动端优先的电商网站，你可能希望用户不能缩放商品详情页，避免影响阅读体验，那就可以加上：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
不过要注意的是，苹果从iOS 10开始已经忽略user-scalable=no了，所以这个设置并不是在所有设备上都有效。
设置视口时容易忽略的问题
很多人以为只要写了width=device-width就万事大吉了，其实还有一些细节需要注意：
-
不要固定width为具体数值：比如写成
width=600，这会让页面在不同设备上表现不一致，失去了响应式的意义。 - 慎用user-scalable：虽然可以禁用缩放，但会影响用户体验，特别是视力有障碍的人群。
-
适配高分辨率屏幕：一些高清屏会用到
viewport-fit=cover来配合刘海屏的显示，比如iPhone X及以后机型。
基本上就这些。设置视口看起来简单，但却是移动端开发中非常基础又关键的一环。只要合理使用<meta viewport>，就能让你的网页在手机上看起来更舒服、用起来更顺手。
