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

Redirect using javascript or CSS on device rotation from portrait/landscape

本文关键字：横向 javascript 重定向 CSS 旋转      更新时间：2023-09-26

我寻找了这个问题的可能答案，但到目前为止一点乐趣都没有。所以也许你可以帮忙;我为网站设计了一个移动版本，可以使用以下命令从主桌面布局轻松定位/重定向到此版本：

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

}

在小型设备上访问网站时工作正常;（iPhone，纵向和横向的Android）或平板电脑（iPad，Kindle，纵向的Android）。

现在我想回到桌面布局，当平板电脑（带有：（screen.width>= 1000））横向访问网站时。

因此，当处于纵向模式（保持移动版本布局）时，则在旋转时重定向（到桌面版本）更适合横向查看。

如何最好地实现这一目标，知道我的编码是有限的;-）或者如果已经有答案，请告诉我。

试试这个，使用 jQuery mobile（更多信息在这里），就像 @Felipe_Valencia 提出的那样：

<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>

编辑：

还有一个仅限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>

希望它对:)有所帮助

您可以使用 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移动版，你可以尝试这样的东西......

$( 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";
    }
});

希望对您有所帮助。

相关文章：