Question

我正在使用Bootstrap 3开发一个项目，我想将用户重定向到一个页面，表明他们需要旋转他们的小工具。
例如，如果他们在横向模式下使用智能手机，我想渲染一个页面，指示他们旋转手机。它不是警报，而是带有旋转信号图像的页面。
所以，我有这个代码：

$(document).ready(function(){
   if ($(window).width() <= 480) && ($(window).width() >=320) {
      document.location = "[path to]/rotate.html";
   }
});

它不仅不起作用，而且还会混淆窗口调整大小时处理特定元素的其他脚本。

编辑：
来自@Varinder的回答完全解决了问题（谢谢！），但现在我遇到了“else”语句的问题。

$(document).ready(function(){
   if ( ($(window).width() <= 480) && ($(window).width() >=320) ) {
      document.location = "rotate.html";
   }
   else {
   $(window).resize(function(){
    document.location = "index.html"
   ;});
   }
});

它不会发生。在重定向到rotate.html之后，它会保持在每个其他窗口大小。

最终编辑：
感谢@Varinder和@azeós，一切都是固定的。我将所有内容包装在一个新div（.content）中，外面唯一的内容是旋转页面的内容。这很有效。

谢谢，

Answer 1

可能需要包装if条件

$(document).ready(function(){
   if ( ($(window).width() <= 480) && ($(window).width() >=320) ) {
      document.location = "[path to]/rotate.html";
   }
});

修改

正如@azeós所说，如果您打算在用户旋转设备时显示不同的信息，那么最好使用media queries

还有orientationchange事件

$( window ).on( "orientationchange", function( e ) { if ( e.orientation ) { if( e.orientation == "portrait" ){ // do something } else if( e.orientation == "landscape" ) { //do something } } });

Answer 2

如果你这样做，你最终会得到一个重定向循环。您需要检查您是否已经访问过这些页面。

你真的只有两页要显示（rotate.html和index.html）？

$(document).ready(function() {
    var currentUrl = window.location.pathname.replace('/', '');
    function rotate() {
        if (($(window).width() <= 480) && ($(window).width() >= 320)) {
            if (currentUrl != 'rotate.html') {
                document.location = 'rotate.html';
            }
        } else {
            if (currentUrl != 'index.html') {
                document.location = 'index.html';
            }
        }
    }
    rotate();
    $(window).resize(function() {
        rotate();
    });
});

请注意，如果您不仅仅是index.html，那么您必须进行一些更改。因为如果用户在page2.html并且旋转了他的手机，则会被重定向到rotate.html，当他再次轮换时，而不是回到page2.html，最终会进入{{1} }}

我认为使用媒体查询的CSS方法是更好的解决方案：JSFiddle

根据窗口大小重定向页面

2 个答案: