JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码

以下是详细的攻略:

JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码

在移动端开发过程中，为了适配不同尺寸的手机屏幕，我们需要对页面进行自适应缩放。那么如何实现呢？下面是两种基于 JavaScript 的实现方法。

方法一

通过 JavaScript 获取文档宽度，然后按比例进行缩放。

(function () {
  function setFontSize() {
    var winWidth = document.documentElement.clientWidth;
    if (winWidth > 750) {
      winWidth = 750;
    }
    document.documentElement.style.fontSize = (winWidth / 7.5) + 'px';
  }
  setFontSize();
  window.onresize = setFontSize;
})();

这段代码中，首先获取文档宽度。如果文档宽度超过 750px，就把宽度设为 750px，这是因为此时屏幕已经很宽了，再放大字体会导致显示不全。然后设定根元素的 fontSize 值，用 winWidth / 7.5 来计算字体大小，因为 750px 是 rem 基准值，1rem 等于宽度的 1/7.5。

可以将这段代码放在 head 中，让页面加载时就执行它。

方法二

通过 viewport 媒体查询实现自适应缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

此处的 viewport 主要作用是对移动设备的屏幕进行适配。其中，width=device-width 表示宽度为设备宽度，initial-scale=1.0 表示初始缩放比例为 1，maximum-scale=1.0 表示缩放比例最大为 1，user-scalable=0 表示不允许用户缩放。

通过设置这些属性，可以使得页面在打开时自动缩放到适配设备宽度。不过需要注意的是，此方法可能会与一些页面布局有冲突，比如 iPhoneX 自带的底部位置栏，会导致视口高度与客户端实际显示高度不一致，从而出现布局错乱。需根据具体情况进行调整。

以上两种方法都是常用的移动端自适应方案。选择哪种方案，应根据自身项目情况以及具体需求来确定。