移动端适配方案

最新推荐文章于 2024-05-02 18:12:22 发布

一个萌新小土豆

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量219

点赞数 4

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/SHX_fusheng/article/details/137959766

版权

使用rem作为适配，设计稿宽度定位750px，转换为rem为7.5rem

function setRem() {
  var deviceWidth = document.documentElement.clientWidth;
  if (deviceWidth > 750) {
    deviceWidth = 7.5 * 50;
  }

  document.documentElement.style.fontSize = deviceWidth / 7.5 + "px";

  var lastTouchEnd = 0;
  document.documentElement.addEventListener("touchend",function (event) {
    var now = Date.now();
    if (now - lastTouchEnd <= 300) {
      event.preventDefault();
    }
    lastTouchEnd = now;
  },false);

  if (document.getElementsByTagName("meta")["viewport"]) {
    document.getElementsByTagName("meta")["viewport"].content =
        "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0";
  } else {
    var meta = document.createElement("meta");
    meta.content =
        "width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=0";
    meta.name = "viewport";
    document.getElementsByTagName("head")[0].appendChild(meta);
  }
}
setRem();