移动端适配（通过设置meta元素中content的initial-scale值达到移动端适配）

最新推荐文章于 2024-07-09 10:38:13 发布

小师师爱喝可乐

最新推荐文章于 2024-07-09 10:38:13 发布

阅读量134

点赞数 4

分类专栏：笔记文章标签： javascript html html5 前端前端框架

本文链接：https://blog.csdn.net/YS_bigPang/article/details/137536720

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了如何通过JavaScript动态设置`viewport`meta标签，以实现移动端设备的自适应布局，确保在不同屏幕尺寸下页面内容保持合理显示。

摘要由CSDN通过智能技术生成

移动端适配

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="./favicon.png" />
  <meta name="viewport" content="" />
  <script>
    //定义设计稿宽度为375
    const DESIGN_WIDTH = 375;
    //通过设置meta元素中content的initial-scale值达到移动端适配
    const setViewport = function () {
      //计算当前屏幕的宽度与设计稿比例
      let scale = window.screen.width / DESIGN_WIDTH;
      // 获取元素
      let meta = document.querySelector("meta[name=viewport]");
      let content = `width=${DESIGN_WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no`;
      // 判断是否已存在
      if (!meta) {
        meta = document.createElement("meta");
        meta.setAttribute("name", "viewport");
        document.head.appendChild(meta);
      }
      meta.setAttribute("content", content);
    };
    setViewport();
    //   监听屏幕变化事件
    window.addEventListener("resize", setViewport);
    //   监听屏幕翻转事件
    window.addEventListener("orientationchange", setViewport);
  </script>
  <title>Vite App</title>
</head>