使用amazeui如何使移动端在横屏下和pc端一样效果

2025-05-17 09:14:57
推荐回答(1个)
回答1:

无论是ipad还是安卓:
可以在function里面实装切换后的事件,比如横竖屏不同,画面的布局设计,css使用不同等等。
※你可以使用window.orientation来判断切换之后到底是横屏还是竖屏。

但是: 关于上面的代码,有几项是需要注意的。
1, window.orientation
经过测试,在ipad,和andriod系统上面,window.orientation来判断横竖屏用得值正好相反。
window.orientation值参考:

window.orientation值
横竖屏结果

ipad
90或者-90 横屏

ipad
0 或者180 竖屏

Andriod
0 或者180 横屏

Andriod
90或者-90 竖屏

2,如何判断自己的设备是ipad还是安卓

//自动判断设备横屏or竖屏
var autoFullscreen = function () {
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function () {
var ua = navigator.userAgent.toLowerCase();
var deviceType = "";
//determine device type
if (ua.indexOf("ipad") > 0) {
deviceType = "isIpad";
} else if (ua.indexOf("android") > 0) {
deviceType = "isAndroid";
} else if (ua.indexOf("iphone") > 0) {
deviceType = "isIphone";
} else {
return;
}
// 判断横竖屏
if ("isIpad" == deviceType) {
if (Math.abs(window.orientation) == 90) {alert("我是ipad的横屏"); }
else {alert("我是ipad的竖屏"); }
} else if ("isAndroid" == deviceType) {
//纵屏 90 or -90 横屏 0
if (Math.abs(window.orientation) == 90) {alert("我是Android的纵屏"); }
else {
//document.webkitCancelFullScreen();
alert("我是Android的横屏");
}
} else if ("isIphone" == deviceType) {
if (Math.abs(window.orientation) == 90) {}
else {}
}
}, false);
}