使用javascript或CSS在设备上从纵向/横向旋转重定向

我在寻找这个问题的可能答案，但到目前为止一点也不好玩。所以也许你可以帮忙；我为一个网站设计了一个移动版本，可以通过以下方式从主桌面布局轻松定位/重定向到此版本：

 // load Mobile version
  if (screen.width <= 999) {
window.location = "http://www.domain/test/Mobile/index.html";

//加载移动版本
如果（screen.width=1000））正在横向访问网站

因此，在纵向模式下（保持移动版本布局），然后在旋转时重定向（到桌面版本）更适合横向视图

知道我的编码是有限的，如何最好地实现这一点；-）或者如果已经有了答案，请告诉我。
您可以使用window.matchMedia

function redirectMobile() {
    if (typeof window.matchMedia !== "undefined" && window.matchMedia("(max-width: 999px)").matches) {
        window.location = "http://www.domain/test/Mobile/index.html";
    }
}

//您可以使用例如“（方向：横向）”或其他媒体查询来扩展其他类型的重定向。
您可以使用window.matchMedia

function redirectMobile() {
    if (typeof window.matchMedia !== "undefined" && window.matchMedia("(max-width: 999px)").matches) {
        window.location = "http://www.domain/test/Mobile/index.html";
    }
}

//您可以使用例如“（方向：横向）”或其他媒体查询来扩展其他类型的重定向。
如果您使用JQuery mobile，您可以尝试以下方法

$( window ).on( "orientationchange", function( event ) {
   $( "#orientation" ).text( "This device is in " + event.orientation + " mode!" );
    if ($(window).width() <= 999) {
        window.location = "http://www.domain/test/Mobile/index.html";
    }
});

$（窗口）.on（“方向更改”，函数（事件）{
$（“#方向”）.text（“此设备处于”+event.orientation+“模式！”）；
如果（$（window）.width（）如果您使用JQuery mobile，您可以尝试以下方法

$( window ).on( "orientationchange", function( event ) {
   $( "#orientation" ).text( "This device is in " + event.orientation + " mode!" );
    if ($(window).width() <= 999) {
        window.location = "http://www.domain/test/Mobile/index.html";
    }
});

$（窗口）.on（“方向更改”，函数（事件）{
$（“#方向”）.text（“此设备处于”+event.orientation+“模式！”）；
如果（$（window）.width（）尝试使用@Felipe_Valencia建议的jQuery mobile：

<script src="code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
       //Don't forget to include these ^
<script>
    $( window ).on( "orientationchange", function( event ) {
      if (event.orientation == 'landscape' && screen.width>=1000){
          // load landscape version
          window.location = "http://www.domain/test/index.html";
      }
    });
</script>


//别忘了包括这些^
$（窗口）.on（“方向更改”，函数（事件）{
如果（event.orientation==“横向”&&screen.width>=1000）{
//加载横向版本
window.location=”http://www.domain/test/index.html";
}
});

编辑：


还有一个只有Ipad的解决方案。
此脚本检测移动浏览器，但我已删除了检测iPad的部分。请自己查看：

<script src="code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<script>
//Don't forget to include these ^ 
$( window ).on( "orientationchange", function( event ) { 
    if (event.orientation == 'landscape'){ 
         // load landscape version if not mobile browser (except the ipad one) 
          if(!(/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ) {
              window.location = "http://www.domain/test/index.html";
          };
    };
});
</script>


//别忘了包括这些^
$（窗口）.on（“方向更改”，函数（事件）{
如果（event.orientation==“横向”）{
//如果不是移动浏览器，则加载横向版本（ipad除外）
如果（！（/Android | webOS | iPhone | iPod | BlackBerry | IEMobile | Opera Mini/i.test（navigator.userAgent）））{
window.location=”http://www.domain/test/index.html";
};
};
});

希望有帮助：）
试试这个，使用@Felipe_Valencia建议的jQuery mobile：

<script src="code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
       //Don't forget to include these ^
<script>
    $( window ).on( "orientationchange", function( event ) {
      if (event.orientation == 'landscape' && screen.width>=1000){
          // load landscape version
          window.location = "http://www.domain/test/index.html";
      }
    });
</script>


//别忘了包括这些^
$（窗口）.on（“方向更改”，函数（事件）{
如果（event.orientation==“横向”&&screen.width>=1000）{
//加载横向版本
window.location=”http://www.domain/test/index.html";
}
});

编辑：


还有一个只有Ipad的解决方案。
此脚本检测移动浏览器，但我已删除了检测iPad的部分。请自己查看：

<script src="code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<script>
//Don't forget to include these ^ 
$( window ).on( "orientationchange", function( event ) { 
    if (event.orientation == 'landscape'){ 
         // load landscape version if not mobile browser (except the ipad one) 
          if(!(/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ) {
              window.location = "http://www.domain/test/index.html";
          };
    };
});
</script>


//别忘了包括这些^
$（窗口）.on（“方向更改”，函数（事件）{
如果（event.orientation==“横向”）{
//如果不是移动浏览器，则加载横向版本（ipad除外）
如果（！（/Android | webOS | iPhone | iPod | BlackBerry | IEMobile | Opera Mini/i.test（navigator.userAgent）））{
window.location=”http://www.domain/test/index.html";
};
};
});

希望有帮助：）
你好，Felipe谢谢你的回答，我会试试，但想知道我是否将代码放在一个单独的.js链接中？只需添加code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js并将代码放在下面，tagsHi Felipe谢谢你的回答，我会试试，但想知道我是否将代码放在一个单独的.js链接中？只需添加code.jquery.com即可/mobile/1.4.5/jquery.mobile-1.4.5.min.js并将代码放在下面，使用tagsHi-LochNess，我也会尝试你的答案并将结果发送给你。ThanksHi-LochNess，我也会尝试你的答案并将结果发送给你。感谢Hanks@Evocrome对你的帮助，但目前为止运气不好！我可以在设备中获得移动版本（纵向和横向）和桌面按计划安装在更大的屏幕上。但当使用平板电脑（ipad和kindle Fire HD）横向定位时，它不起作用。纵向和横向都很好，但横向时不会切换回桌面布局。
//如果（screen.width=1000）加载移动版本{//加载横向版本窗口。位置=”http://www.example/index.html";   }})
这是我的代码，但不起作用。如果你能发现问题，请告诉我。Thx！如果你尝试不使用“&&screen.width>=1000”？谢谢你的提示！它起到了一定的作用，但更令人担忧的问题激增了！使用kindle Fire HD 8.9，我可以在旋转时从移动版纵向切换到横向桌面版（奇怪的是，我能用FF&Chrome中的开发工具对其进行测试，但在iPad Mini上无法实时运行）。但现在更大的问题是：我在这两个平台（手机/桌面、手机或平板电脑）上都失去了导航功能！！！更糟糕的是，它被卡住了“加载”点击导航时的页面…永远。不知道为什么会发生这种情况。如果你能指出一些值得赞赏的东西。Thx。我认为这与上面的代码（加载部分）没有任何关系：（感谢@Evocrome的帮助，但到目前为止没有运气！我可以在设备中获得移动版本（纵向和横向）和桌面在更大的屏幕上。但当使用平板电脑（ipad和kindle Fire HD）在横向定位时，它不起作用。两者在纵向上都很好，但在横向定位时不会切换回桌面布局。
//如果（screen.width=1000）{//加载横向版本window.location="http://www.example/index.html“；}}}）；
这是我的代码，但不起作用。如果有问题，请告诉我