当宽度太小时，重定向到移动页面

Question

由于我的网站在小屏幕上看起来不太好，我想创建一个JS功能，当屏幕宽度小于或等于800px时，它会将我重定向到页面的移动版本。

这是它的代码：

if (screen.width <= 800) {
  document.location ="index_mobile.html";
};

如果代码有效，那么当我将浏览器窗口缩小到800px宽时，index_mobile.html应该会显示出来。 但它现在还没有出现。 有谁知道发生了什么？

Answer 1

移动浏览器不会报告或使用真实的设备分辨率，因为这会使互联网上的所有网站基本上无法使用。

他们所做的是创建一个“虚拟屏幕”，其分辨率更接近台式PC的分辨率，然后在页面上实现缩放。

如果您想知道真正的设备分辨率，则需要在设备上禁用自动缩放。 例如，对于iOS和Android设备，可以添加

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

到您页面的<head>部分。 这通知浏览器该页面是为处理低分辨率设备而设计的，并禁用虚拟屏幕层。

Answer 2

screen.width将返回监视器的宽度，而不是窗口，因此您不能只缩小浏览器窗口以获得不同的值。 要做到这一点，你会想要使用window.outerWidth或其他东西。