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); }); |
通过调用
1 2 3 | if (window.innerWidth <= 600) { document.location ="HomeMobile.html"; } |
请注意,
尽管这是您的选择,但我还是建议您使用CSS3 Media Queries。如果您在用户调整窗口大小时重定向到另一个页面,则他/她将不得不等待另一个页面加载(这很烦人)。
1 | <link rel="alternate" media="handheld" href="/path/to/mobile.page" /> |
使用此代码将手持设备重定向到另一个页面。
调整窗口大小时,您要做的就是调整窗口大小。您正在检查屏幕宽度,该宽度在您的显示器分辨率下保持不变,因此这就是为什么它没有变化。