我寻找了这个问题的可能答案,但到目前为止一点乐趣都没有。所以也许你可以帮忙;我为网站设计了一个移动版本,可以使用以下命令从主桌面布局轻松定位/重定向到此版本:
// 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";
}
});
希望对您有所帮助。