移动端前端适配-视口viewport

原创已于 2025-09-11 17:40:48 修改 · 667 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-09-11 17:40:05 首次发布

移动端前端适配-视口

移动端开发目前主要包含三类：
原生App开发：IOS、Android、RN、uniapp、Flutter等
小程序开发：原生小程序、uniapp、Trao等
Web页面：移动端的web页面，可以使用浏览器或者webview浏览

文章目录

移动端前端适配-视口
一、viewPort 视口
二、视口

一、viewPort 视口

在一个浏览器中，我们可以看到的区域就是视口（viewport）：

在PC端页面中，我们不需要对视口进行区分，因为布局视口与视觉视口是同一个(浏览器展示页面的地方，不含浏览器的工具栏，那是浏览器的ui设计)；
在移动端，布局视口与视觉视口是不同的：移动端的网页窗口往往比较小，我们可能会希望将一个大的网页在移动端可以完整的展示；因此默认情况下，移动端的布局视口是大于视觉视口的

在移动端，我们将视口划分为以下三种：
布局视口
视觉视口
理想视口

这些概念，事实上来自于 A tale of two viewports — part two (quirksmode.org)；接下来介绍一下三种视口，一定要看懂、理解，否则后面的系列会很难掌握。

二、视口

2.1.布局视口

布局视口（layout viewport）是 html 元素的父容器，只要不在 CSS 或 JS 中修改元素的宽度，元素的宽度就会撑满布局视口的宽度：

在 CSS 中可以通过 meta 标签设置 viewport 来改变
在 JS 中，我们可以通过 document.documentElement.clientWidth 来获取或改变布局视口的大小

默认布局视口大小：
移动端默认布局视口大小为 980px
因此，当 html 页面中某个元素的宽度大于 980px 时，移动设备浏览器显示该元素时会出现横向滚动条。
换个说法来理解，布局视口就是我们开发时在 html 页面时，通过 CSS 设置元素的画布
在移动端，我们基于默认布局视口大小980px开发的页面是如何显示到移动设备上的？
假设我们移动端为375*667（iphone se pc端调试显示的尺寸），为了在手机上显示。布局视口会针对手机大小进行等比例缩放。比如：980px等比缩到375px。那么980px布局中的div也会等比缩放。

//有这样代码，div不会缩放（pc端和移动端大小一致）这行代码只针对移动端生效
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
// 没有这行代码，pc端标准的100px ，移动端大小被会缩小但元素审查的时候还是显示100px

代码注释：
用于修改布局视口大小，没有这行代码content=“width=980px”，布局视口默认980
width=device-width，让布局视口和视觉视口（设备的宽度）一致 = 这就等于理想视口
initial-scale表示页面加载时以 1:1 的比例显示，即不缩放
user-scalable =no 不允许用户在手机上使用手指进行放大缩小(但有些浏览器手机会忽视这个)，因此需要加上minimum-scale=1.0, maximum-scale=1.0，用来禁止用户缩放
在这里插入图片描述

2.2.视觉视口

视觉视口（visual viewport），顾名思义就是用户直观看到的区域；
当我们在开发页面时，通过 F12 进入手机模式调试时，看到的区域就是视觉视口，如下图：
在这里插入图片描述

我们在开发过程中，为元素设置的宽度（ CSS像素【单位：px】）是相对于布局视口（即 meta 标签中设置的 viewport 的值）来说的，等到页面在展示时，元素的可视大小不一定等于元素的CSS像素，例如：为一个div设置宽度为100px，当页面缩放为100%时，我们通过F12可以看到div的CSS像素为100px，可视大小也为100px（通过截图工具可以量出来），此时 1px 占了 1个像素；当页面放大到200%时，我们通过F12可以看到div的CSS像素依然为100px，但是由于视觉视口放大了2倍，此时 1px 占了 0.5 个像素，所以直观效果是 div 变大了，如下动画：

通过布局视口我们知道，移动设备的默认布局视口大小是 980px，当我们为 div 设置为 100px 时，在PC端网页按照100%展示（不进行缩放时），实际看到的就是 100px 的大小，但是在手机端看到的视觉效果是等比例缩放后的，以 iphone6 为例，手机端的视觉视口宽度为375px 小于默认的布局视口 980px，100px 的div 就会等比缩小展示在视觉视口，如下对比图：
在这里插入图片描述