vue2 移动配置 meta 的 viewport 控制移动端屏幕自适应的方法

完备世界

已于 2022-04-14 08:38:01 修改

阅读量3.3k

点赞数 2

分类专栏： vue 文章标签： vue 前端框架

于 2022-04-14 08:34:59 首次发布

本文链接：https://blog.youkuaiyun.com/lz201104/article/details/124162908

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

问题描述：

在移动端开发时，遇到需要设置移动端自适应全屏的时候，发现这个功能，和普通的HTML不一样，不是每个页面都有这个配置后，网上进行百度了一圈发现没有类似的标题的文章，可能每个人的理解不一样吧，哈哈，这个算是融合之前比较简单的方法，其实还有很多方法。

欢迎给出建议和意见完善文章，让更多人的不走弯路。

方法一（比较简单）：

1.找到vue目录下的index.html文件，进行修改，如下图

代码如下：

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

方法二（路由配置）：

代码如下，如果不行，看看格式是不否正确，这里没有测试：

meta: {
            charset: 'utf-8',
            name: 'viewport', 
            content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'
        },

知识补充：

什么是Viewport：

手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。
原文链接：https://blog.youkuaiyun.com/weixin_44161385/article/details/123550675

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）

height：和 width 相对应，指定高度

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例

maximum-scale：允许用户缩放到的最大比例

minimum-scale：允许用户缩放到的最小比例

user-scalable：用户是否可以手动缩放