关于jquery:制作了一个网站,制作了mobile.html版本,希望在宽度上在两者之间进行切换

Made a website, made a mobile.html version wanting to switch between the two at width

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

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

尝试使用此方法,它适用于chrome和firefox的响应测试模式,但不适用于仅调整窗口大小的情况。

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


已解决,感谢大家的提示。
原始帖子:jQuery:如何动态检测窗口宽度?由Rob W

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    $(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);
    });

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

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

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

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


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

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


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