vue实现项目对不同设备展示的缩放

蔚落 2023-01-21 03:27 142阅读 0赞

我们看到我们当前的网站在iphone6/7/8上基本上没什么问题

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70][]

但是在ipad上展示效果就不尽如人意了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 1][]

# 我们希望我们的网站能够针对不同的设备类型能够展示不同的展示效果的一个网站 #

我们的整个项目都通过rem来进行页面布局

base.scss

html {
        font-size: 100px; // rem的大小是相对于这个根姿态的fontSize的
    }
    body {
        font-size: .12rem;
    }

我们要检查一下项目里面有没有笔误的地方使用了px，把它改成rem

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 2][]

我们现在开发的尺寸都是根据iphone678，也就是375这个尺寸来开发的，如果你屏幕变宽的话，我这个屏幕就等比例放大

如果屏幕榨，那么我就等比例缩小

我们可以在index.html里面写一段js代码，这里是不参与编译的，所以我们要用原生ES5的语法来写

<!DOCTYPE html>
    <html lang="">
      <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">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <title><%= htmlWebpackPlugin.options.title %></title>
        <script>
          // 这里表示我一进入页面，我就知道设备现在的屏幕宽度是多少
          var width = document.documentElement.clientWidth || document.body.clientWidth;
          // 我们再计算一下当前的设备和我们网页开发的默认的设备之间的比例
          var ratio = width / 375;
          // 我们要等比例缩放，我们整个网站都是使用rem布局的，那么我们只要使用改变fontSize的大小就行了    
          // 计算新的设备字体大小
          var fontSize = 100 * ratio;
          // 把这个数值赋值给html的fontsize
          document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px'
        </script>
      </head>
      <body>
        <noscript>
          <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>
        
      </body>
    </html>

这个时候我们再看一下iPad上的展示效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 3][]

这样我的网站就可以适配不同的设备了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70]: /images/20221021/044481ff270f4e238d6bd09f3bd2a8eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 1]: /images/20221021/a98dba264a694c989f6db57b1776a99d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 2]: /images/20221021/48064a5158bf4e7f88d1fecb1511e79f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 3]: /images/20221021/cd3ea882f4804cfaa4d9fb78ed970da7.png