Question

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

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

尝试使用此功能，它适用于chrome和Firefox的响应测试模式，但仅在调整窗口大小时无效。

我尝试使用视口在同一页面上执行这些操作，但是我想在切换到移动设备时切掉大部分页面以保持其清洁。

Answer 1

调整窗口大小时，您要做的就是调整窗口大小。您正在检查屏幕宽度，该宽度在您的显示器分辨率下保持不变，所以这就是为什么它没有变化。

Answer 2

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

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

Answer 3

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

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

请注意，window.innerWidth包含滚动条的宽度。

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

Answer 4

已解决，感谢大家的提示。原帖：jQuery: How to detect window width on the fly?，作者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);
    });

制作了一个网站，制作了mobile.html版本，希望在宽度上在两者之间切换

4 个答案: