做了一个网站，做了一个mobile.html版本，想在两者之间切换宽度答案

【问题标题】：Made a website, made a mobile.html version wanting to switch between the two at width做了一个网站，做了一个mobile.html版本，想在两者之间切换宽度
【发布时间】：2018-08-12 11:15:38
【问题描述】：

我有 home.html 和 mobilehome.html，当您将屏幕大小调整为移动设备宽度时，我想在页面之间进行切换。

if (screen.width <= 600) {
        document.location = "HomeMobile.html";
    }

尝试使用它，它适用于 chrome 和 firefox 上的响应式测试模式，但不适用于简单地调整窗口大小。

我尝试使用视口在同一页面上执行它们，但我想在切换到移动设备时切掉大部分页面以保持干净。

【问题讨论】：

为什么不使用实际的响应式设计？
解释一下？我尝试使用视口在同一页面上执行它们，但我想在更改为移动设备时删除大部分页面的 html 以保持干净。
这里有很多例子google.nl/…
这些都展示了如何检测窗口大小的变化，我尝试将其与 document.location = "HomeMobile.html";但什么也没发生。
检测窗口大小并重定向页面实际上是最糟糕的方法。正如上述评论者所建议的那样，改用 CSS 媒体查询。忽略这个问题的任何答案，确保他们可以解决您的直接问题，但该解决方案本质上是有缺陷的。

标签： jquery html css viewport

【解决方案1】：

当您调整窗口大小时，您所做的就是调整窗口大小。您正在检查在您的显示器分辨率下保持不变的屏幕宽度，这就是它没有改变的原因。

【讨论】：

哦，你是对的，谢谢。您有解决问题的建议吗？

【解决方案2】：

<link rel="alternate" media="handheld" href="/path/to/mobile.page" />

使用此代码将手持设备重定向到另一个页面。

【讨论】：

【解决方案3】：

通过调用screen.width，您指的是物理屏幕的宽度（以像素为单位）。要获取视口宽度，请使用window.innnerWidth:

if (window.innerWidth <= 600) {
  document.location = "HomeMobile.html";
}

注意window.innerWidth 包括滚动条的宽度。

虽然这是您的选择，但我建议您使用CSS3 Media Queries。如果您在用户调整窗口大小时重定向到另一个页面，他/她将不得不等待另一个页面加载（这很烦人）。

【讨论】：

【解决方案4】：

已解决，谢谢大家的指点。原帖：jQuery: How to detect window width on the fly? by Rob W

    $(document).ready(function () {
        var $window = $(window);
        var $pane = $('#pane1');

        function checkWidth() {
            var windowsize = $window.width();
            if (windowsize < 600) {
                //if the window is less than 600px wide change to mobile page.
                    document.location = "HomeMobile.html";

            }
        }
        // Execute on load
        checkWidth();
        // Bind event listener
        $(window).resize(checkWidth);
    });

【讨论】：