若依+vue 移动端显示适配问题

最新推荐文章于 2024-07-07 18:00:46 发布

向生活低头...

最新推荐文章于 2024-07-07 18:00:46 发布

阅读量3.2k

点赞数 3

文章标签： vue.js javascript 前端 vue

本文链接：https://blog.csdn.net/qq_30959781/article/details/121678558

版权

1、在public>index.html中，原有代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
...

2、添加代码如下，调整缩放比例

<script>
    const viewportEl = document.querySelector('meta[name="viewport"]')
    var scale = 1 / window.devicePixelRatio,
      content = 'width=device-width, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=no';
        if (viewportEl) {
            viewportEl.setAttribute('content', content);
        }
  </script>

PS：

1、width：xxxx.html文件的页面可视区域的宽度，值可为数字或关键词device-width。其中，width=device-width就是y的值。

2、width=device-width：xxxx.html文件的页面可视区域的宽度，以设备（device）宽度（width）为基数进行缩放。即假设页面实际尺寸是x，后进行缩放，值为z，则把页面实际尺寸缩放后的值z，放进一个宽度为y的框框里面，其中，width=device-width就是y的值。

3、initial-scale=？：xxxx.html文件的页面首次被显示时可视区域的缩放级别。取值1.0则xxxx.html文件的页面按实际尺寸显示，无任何缩放。（当然，xxxx.html文件的页面的无任何缩放的宽度可能等于设备宽度y，也可能大于或者小于设备宽度y）。
如：initial-scale=0.5，这个0.5的缩放级别是和initial-scale=1.0的缩放级别相对比的。初始化时，对页面实际尺寸x进行缩放，把页面实际尺寸缩放后的值z=x*0.5，为初始化的页面显示大小。（页面实际尺寸还是x不变，z只是缩放后的页面显示尺寸。）

4、maximum-scale=？：xxxx.html文件的页面的显示大小如果可以进行缩放，最大缩放值不能超过？*页面实际尺寸的值。

5、minimum-scale=？：xxxx.html文件的页面的显示大小如果可以进行缩放，最小缩放值不能小于？*页面实际尺寸的值。

6、use-scalable=yes/no：表示用户是否可以手动调整缩放比例。（在安卓手机上就是表示，用两只手指缩放，是否有网页缩放效果）

7、window.devicePixelRatio:该 Window 属性 devicePixelRatio 能够返回当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率。此值也可以解释为像素大小的比率：一个 CSS 像素的大小与一个物理像素的大小的比值。简单地说，这告诉浏览器应该使用多少个屏幕的实际像素来绘制单个 CSS 像素。

参考：

移动端适配,h5网页,手机端适配兼容方案.可以显示真实的1px边框和12px字体大小,dpr浅析 - 成风6 - 博客园以前写移动端都是用这段JS解决. JS中设计稿的大小可以随便改,我这里用的设计稿都是750的,将750尺寸下,根元素font-size大小设置成100px,用这个JS可以实现页面随根元素的font-shttps://www.cnblogs.com/chengfeng6/p/6600613.html