移动端 viewport 适配

最新推荐文章于 2024-02-21 09:55:33 发布

白猫儿

最新推荐文章于 2024-02-21 09:55:33 发布

阅读量974

点赞数

分类专栏：移动端适配文章标签： html css web app

本文链接：https://blog.csdn.net/weixin_46107920/article/details/111563404

版权

移动端适配专栏收录该内容

3 篇文章 0 订阅

订阅专栏

移动端 viewport 适配

为什么要是用 viewport 做适配呢？

目的就是为了，将所有设备布局视口的宽度调整为设计图的宽度

先上完美 viewport 适配代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 320px;
      height: 320px;
      background-color: #f60;
    }
  </style>
</head>
<body>
  <div class="box">test</div>

  <script>
    (function() {
        // targetWidth 设计稿物理像素
        // document.documentElement.clientWidth 理想视口的屏幕宽度
        // scale 由于document.documentElement.clientWidth大于 targetWidth 物理像素，是放大操作
      let targetWidth = 640
      let scale = document.documentElement.clientWidth/targetWidth
      let meta = document.querySelector("meta[name='viewport']")
      meta.content = "initial-scale="+ scale +", minimum-scale="+ scale +", maximum-scale="+ scale +", user-scalable=no"
    })()
  </script>
</body>
</html>

得到的效果如下：

在这里插入图片描述

两个不同设备上的得到的效果都占50%

viewport 适配的原理

viewport 适配方案中，每一个元素在不同设备上占据的 css 像素的个数是一样的，但是css像素和物理像素的比例是不一样的，它们都是等比的。

viewport 适配的优缺点

优点：所量就是所得

像素的比例是不一样的，它们都是等比的。

viewport 适配的优缺点

优点：所量就是所得
缺点：没有使用完美视口

白猫儿

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
移动端 viewport 适配

移动端 viewport 适配为什么要是用 viewport 做适配呢？目的就是为了，将所有设备布局视口的宽度调整为设计图的宽度先上完美 viewport 适配代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Docume
复制链接

扫一扫