移动端flex垂直方向滚动条高度幽灵视口详解布局视口视觉视口理想视口

最新推荐文章于 2024-05-11 17:30:31 发布

三趾鸥

最新推荐文章于 2024-05-11 17:30:31 发布

阅读量485

点赞数 2

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_44129572/article/details/130278388

版权

文章目录

写在前面，参考链接

这个写得还行…

里面提到了这两篇，我认为里面的一些东西现在已经不是原来那样子了。比如布局视口的获取。但是视口的概念来源于他，他对移动端的布局什么的做出了很大的贡献。

问题

在写移动端的时候，用到了flex，我发现产生了垂直方向的滚动条和“高度幽灵”，而PC端则不会。

如图

在这里插入图片描述

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            display: flex;
        }
        .box2{
            width: 100px;
            flex-shrink: 0;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">2</div>
        <div class="box2">2</div>
        <div class="box2">2</div>
        <div class="box2">2</div>
        <div class="box2">2</div>
    </div>
    <div class="box3">222</div>
</body>
</html>

经过我的反复琢磨，发送条件：移动端，flex，不换行，不压缩，弹性项目总宽度大于屏幕宽度，不设置禁止用户缩放。

有的人可能看不到垂直滚动条，缩小就能看到垂直方向的滚动条了。

是的，禁止用户缩放就能解决问题。

那为什么呢？我明明已经在

里设置了布局视口宽度等于设备宽度了啊。

这就不得不引入视口的概念了。

视口

分为布局视口，视觉视口以及理想视口。

视觉视口

视觉视口就是用户看得到的视口，它的值是视口所能容纳的CSS像素；也就是我们平时所说的px，比如某个视觉视口的宽度的值是375，那么当前视口最多能放宽度为375px的内容。

在这里插入图片描述

如图，我box1的宽度是375.2px，此时没有进行缩放（缩放为1就是没有进行缩放了），屏幕内刚好能容纳宽度为375.2px(设置为border-box了)的div盒子，可以看到此时的视觉视口宽度是375.2 。

现在我稍微缩小一点，视觉视口宽度就变大了，是大于375的。

在这里插入图片描述

如果进行放大，那么视觉视口的宽度就会变小。

可以看到，在移动端下视觉视口宽度并不等于屏幕宽度。(如果等于的话上述的例子中应该是等于375的)。

window.visualViewport.width 可以获取视觉视口宽度。（来源于MDN)。网上有些帖子说是通过别的获取，我认为是不适合现在的。

布局视口

通过window.innerWidth获取。这是MDN上看到的，跟网上一些帖子的说法不一样。

布局视口就是布局所参照的视口。在PC端它就是等于视觉视口。在移动端…有点复杂。上面例子的垂直方向的滚动条和“高度幽灵”就是跟它有关系。

手机的屏幕跟电脑的屏幕差别是很大的。据网上说法，从前专门进行的移动端开发比较少，为了让网页能在移动端“比较好地显示”，一般的移动端浏览器都会设置一个布局视口，默认宽度一般为980px，移动端浏览器会把网页按照布局视口与手机屏幕的比例进行缩小再呈现给用户，这个时候内容比较小，视觉视口等于布局视口；用户可以进行缩放方便浏览。

比如你随便打开一个网页，以移动端模式浏览，会发现内容变得很小。如图。

在这里插入图片描述

又比如上述的例子中，如果我不进行任何设置，可以见到box1的宽度依然是375，但是视觉上是缩小的。因为它默认是缩小至视觉视口等于布局视口的。

在这里插入图片描述

欸，不是说布局视口宽度默认980吗，为什么有一个是1116呢？这就是我写此篇博客的必要性。

当内容宽度小于默认的布局视口宽度的时候，布局视口的宽度就是默认的；当内容宽度大于默认的布局视口宽度的时候，布局视口宽度就是内容宽度。当然你可以自己去设置。布局视口的宽度是有一个范围的，不同的移动端浏览器不一样，不会小到离谱，也不会大到离谱。

另外，chatgpt告诉我视觉视口高度是根据视觉视口宽度按一定的比例生成的。

回到最开始的问题。当我设置flex，并且弹性项目总宽度大于屏幕宽度（因为我设置了布局视口宽度等于屏幕宽度）、不压缩，不换行，这个时候布局视口就会被内容撑大，对应的布局视口高度也会变大，又因为我没有禁止用户缩放而进行了缩放，所以就看到了垂直方向的滚动条和“高度幽灵”。

比如，我把布局视口设置得足够大并且进行缩放，即使我没有任何内容也会出现垂直方向的滚动条。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=1800">
    <title>Document</title>
</head>
<body>
    <script>
        console.log('布局视口宽度 ' + window.innerWidth);
        console.log('布局视口高度 ' + window.innerHeight);
        console.log('缩放 '+window.visualViewport.scale);
        console.log('视觉视口宽度 '+window.visualViewport.width);
    </script>
</body>
</html>

在这里插入图片描述

可以看到，我设置了布局视口宽度为1800，但是显示出来的只有1501，因为该移动端浏览器的布局视口宽度最大值就是1501了。

理想视口

为了方便开发，我们会设置视觉视口等于布局视觉，这个时候的视口我们称之为“理想视口”。

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maxmun-scale=1.0">

width=device-width，设置布局视口宽度等于设备屏幕宽度。

initial-scale=1.0 缩放比例为100%，即不进行缩放。

user-scalable=no，禁止用户缩放。有些浏览器会忽略此规则。

minimum-scale=1.0,maxmun-scale=1.0 最大缩放和最小缩放为1。

通过上面设置就可以获取得到理想视口了，布局视口宽度也不会被内容撑大。

关于上面内容，我觉得coderwhy讲得还行。我一脸懵逼的情况下听他的视频逐渐有了一些理解。不是打广告。

布局概念-补充

补充关于布局的概念，来源于B站某视频下的评论。我觉得讲得也不错。

在这里插入图片描述

其实响应式布局和自适应布局的目的都是适配各种不同的设置。这是大的方面的，是一种做法而不是某一个具体的布局方法。固定布局也是大的，一般用于PC端，用的固定单位（比如px）。

响应式布局就是一套代码搞定，自适应布局就是为不同的设备搞不同的一套布局，比如京东淘宝都是移动端一套PC端一套。我认为他们的做法里既包含了响应式布局也包含了自适应布局。

其他的如流式布局（字体没有跟着变化），弹性布局（跟流式布局不同的是字体大小也跟着变化）是为了实现响应式布局和自适应布局的一种具体的方法，你还可以用js的手段去实现。

三趾鸥

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
移动端flex垂直方向滚动条高度幽灵视口详解布局视口视觉视口理想视口

移动端布局视口宽度会被内容撑开，布局视口高度会跟着布局视口宽度变化。移动端flex高度问题，高度幽灵，垂直方向滚动条获取布局视口，获取视觉视口，理想视口
复制链接

扫一扫

移动端flex垂直方向滚动条高度幽灵 视口详解 布局视口 视觉视口 理想视口

文章目录

写在前面，参考链接

问题

视口

视觉视口

布局视口

理想视口

布局概念-补充

“相关推荐”对你有帮助么？

移动端flex垂直方向滚动条高度幽灵视口详解布局视口视觉视口理想视口