javascript - 如何在屏幕尺寸上将 html 文件更改为另一个 html 文件？

Question

我的目标是，当您将屏幕尺寸更改为手机的比例(宽度方向)时，您会得到一个不同的 html 文件或类似的文件。

Answer 1

如前所述，您应该真正使用媒体查询和响应式开发来实现您正在寻找的结果。

但是，如果您已确定某些特定页面只需使用不同的页面，那么您可以使用类似的内容:

<script type="text/javascript">

var doRelocation = function() {

    var currentWidth = window.innerWidth,
        breakpoint = 800,
        newLocation = 'new-page.html';

    if (currentWidth < breakpoint) {
        window.location.replace(newLocation);
    }

}

doRelocation();

window.addEventListener('resize', doRelocation);

</script>

此脚本非常基础，但函数会在加载时运行以确定屏幕宽度以及调整大小。它只适用于现代浏览器，但我猜运行 IE8 的小屏幕设备并不多。