Tôi biết rằng trong Safari trên iPhone, bạn có thể phát hiện hướng của màn hình và thay đổi hướng bằng cách lắng nghe onorientationchangesự kiện và truy vấn window.orientationgóc.
Điều này có thể có trong trình duyệt trên điện thoại Android?
Để rõ ràng, tôi đang hỏi liệu xoay vòng của một thiết bị Android có thể được phát hiện bằng JavaScript chạy trên một trang web tiêu chuẩn hay không. Có thể có trên iPhone và tôi tự hỏi liệu nó có thể được thực hiện cho điện thoại Android hay không.
Câu trả lời:
Để phát hiện thay đổi hướng trên trình duyệt Android, hãy đính kèm một trình lắng nghe vào orientationchangehoặc resizesự kiện trên window:
// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width);
}, false);Kiểm tra window.orientationtài sản để tìm ra cách thiết bị được định hướng. Với điện thoại Android, screen.widthhoặc screen.heightcũng có thể cập nhật khi thiết bị được xoay. (đây không phải là trường hợp của iPhone).
Hành vi thực tế trên các thiết bị khác nhau là không nhất quán . Các sự kiện thay đổi kích thước và định hướng có thể kích hoạt theo một chuỗi khác nhau với tần suất khác nhau. Ngoài ra, một số giá trị (ví dụ: screen. Thong và window.orientation) không luôn thay đổi khi bạn mong đợi. Tránh màn hình. Băng thông - nó không thay đổi khi xoay trong iOS.
Cách tiếp cận đáng tin cậy là lắng nghe cả hai sự kiện thay đổi kích thước và định hướng Thay đổi (với một số bỏ phiếu là một biện pháp an toàn) và cuối cùng bạn sẽ nhận được giá trị hợp lệ cho hướng. Trong thử nghiệm của tôi, các thiết bị Android đôi khi không thể kích hoạt các sự kiện khi xoay 180 độ đầy đủ, do đó tôi cũng đã bao gồm một giá trị xác định để thăm dò hướng.
var previousOrientation = window.orientation;
var checkOrientation = function(){
if(window.orientation !== previousOrientation){
previousOrientation = window.orientation;
// orientation changed, do your magic here
}
};
window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);
// (optional) Android doesn't always fire orientationChange on 180 degree turns
setInterval(checkOrientation, 2000);Dưới đây là kết quả từ bốn thiết bị mà tôi đã thử nghiệm (xin lỗi cho bảng ASCII, nhưng có vẻ như là cách dễ nhất để trình bày kết quả). Bên cạnh sự thống nhất giữa các thiết bị iOS, có rất nhiều sự đa dạng trên các thiết bị. LƯU Ý: Các sự kiện được liệt kê theo thứ tự mà chúng bắn.
| ================================================= ============================= | | Thiết bị | Sự kiện bắn | định hướng | trongWidth | màn hình. Băng thông | | ================================================= ============================= | | iPad 2 | thay đổi kích thước | 0 | 1024 | 768 | | (đến phong cảnh) | định hướng | 90 | 1024 | 768 | | ---------------- + ------------------- + ------------ - + ------------ + -------------- | | iPad 2 | thay đổi kích thước | 90 | 768 | 768 | | (để chân dung) | định hướng | 0 | 768 | 768 | | ---------------- + ------------------- + ------------ - + ------------ + -------------- | | iPhone 4 | thay đổi kích thước | 0 | 480 | 320 | | (đến phong cảnh) | định hướng | 90 | 480 | 320 | | ---------------- + ------------------- + ------------ - + ------------ + -------------- | | iPhone 4 | thay đổi kích thước | 90 | 320 | 320 | | (để chân dung) | định hướng | 0 | 320 | 320 | | ---------------- + ------------------- + ------------ - + ------------ + -------------- | | Điện thoại Droid | định hướng | 90 | 320 | 320 | | (đến phong cảnh) | thay đổi kích thước | 90 | 569 | 569 | | ---------------- + ------------------- + ------------ - + ------------ + -------------- | | Điện thoại Droid | định hướng | 0 | 569 | 569 | | (để chân dung) | thay đổi kích thước | 0 | 320 | 320 | | ---------------- + ------------------- + ------------ - + ------------ + -------------- | | Thiên hà Samsung | định hướng | 0 | 400 | 400 | | Máy tính bảng | định hướng | 90 | 400 | 400 | | (đến phong cảnh) | định hướng | 90 | 400 | 400 | | | thay đổi kích thước | 90 | 683 | 683 | | | định hướng | 90 | 683 | 683 | | ---------------- + ------------------- + ------------ - + ------------ + -------------- | | Thiên hà Samsung | định hướng | 90 | 683 | 683 | | Máy tính bảng | định hướng | 0 | 683 | 683 | | (để chân dung) | định hướng | 0 | 683 | 683 | | | thay đổi kích thước | 0 | 400 | 400 | | | định hướng | 0 | 400 | 400 | | ---------------- + ------------------- + ------------ - + ------------ + -------------- |
previousOrientationnên được khởi tạo với hướng hiện tại: var previousOrientation = window.orientation;Nếu bạn muốn bỏ qua các góc quay 180 độ, nghĩa là, bạn không cần phân biệt giữa phong cảnh trái hoặc phải và các biến thể lộn ngược hoặc không, hãy thêm vào sau như dòng đầu tiên checkOrientation(): if (0 === (previousOrientation + window.orientation) % 180) return;Tuy nhiên, không có setTimeoutthủ thuật bổ sung , bạn sẽ chỉ được hưởng lợi từ điều này trên iOS, trong đó xoay 180 độ nhanh chóng chỉ tạo ra một sự kiện duy nhất orientationchange .
Câu trả lời tuyệt vời của hai-bit-trick cung cấp tất cả nền tảng, nhưng hãy để tôi thử tóm tắt ngắn gọn, thực tế về cách xử lý các thay đổi định hướng trên iOS và Android :
resizesự kiện.window.innerWidthvà window.InnerHeightchỉ.window.orientation- nó sẽ không hiện hành trên iOS. resizesự kiện trên Android, và chỉ những orientationchangesự kiện trên iOS.window.orientation(và window.innerWidthvà window.InnerHeight)Những cách tiếp cận này mang lại lợi ích nhỏ so với việc ghi nhớ định hướng trước đó và so sánh:
window.orientationkhông khả dụng trên các trình duyệt máy tính để bàn).Bạn luôn có thể nghe sự kiện thay đổi kích thước cửa sổ. Nếu, trong sự kiện đó, cửa sổ chuyển từ cao hơn rộng sang rộng hơn cao (hoặc ngược lại), bạn có thể chắc chắn rằng hướng điện thoại vừa được thay đổi.
Có thể có trong HTML5.
Bạn có thể đọc thêm (và thử bản demo trực tiếp) tại đây: http://slides.html5rocks.com/#slide-orientation .
window.addEventListener('deviceorientation', function(event) {
var a = event.alpha;
var b = event.beta;
var g = event.gamma;
}, false);Nó cũng hỗ trợ các trình duyệt để bàn nhưng nó sẽ luôn trả về cùng một giá trị.
Tôi đã từng gặp vấn đề tương tự. Tôi đang sử dụng Phonegap và Jquery mobile, cho các thiết bị Adroid. Để thay đổi kích thước đúng, tôi phải đặt thời gian chờ:
$(window).bind('orientationchange',function(e) {
fixOrientation();
});
$(window).bind('resize',function(e) {
fixOrientation();
});
function fixOrientation() {
setTimeout(function() {
var windowWidth = window.innerWidth;
$('div[data-role="page"]').width(windowWidth);
$('div[data-role="header"]').width(windowWidth);
$('div[data-role="content"]').width(windowWidth-30);
$('div[data-role="footer"]').width(windowWidth);
},500);
}Đây là giải pháp:
var isMobile = {
Android: function() {
return /Android/i.test(navigator.userAgent);
},
iOS: function() {
return /iPhone|iPad|iPod/i.test(navigator.userAgent);
}
};
if(isMobile.Android())
{
var previousWidth=$(window).width();
$(window).on({
resize: function(e) {
var YourFunction=(function(){
var screenWidth=$(window).width();
if(previousWidth!=screenWidth)
{
previousWidth=screenWidth;
alert("oreientation changed");
}
})();
}
});
}
else//mainly for ios
{
$(window).on({
orientationchange: function(e) {
alert("orientation changed");
}
});
}Một hình ảnh xác thực khác - một số máy tính bảng Android (Motorola Xoom tôi tin và một chiếc Elonex cấp thấp tôi đang thực hiện một số thử nghiệm, có lẽ cũng vậy) có các máy đo gia tốc của chúng được thiết lập sao cho window.orientation == 0 ở chế độ LANDSCAPE, không phải chân dung !
bạn có thể thử giải pháp, tương thích với tất cả các trình duyệt.
Sau đây là orientationchangepic tương thích:
do đó, tôi là tác giả của một orientaionchangepolyfill, nó dựa trên thuộc tính @media để sửa thư viện tiện ích định hướng trao đổi định hướng
window.addEventListener('orientationchange', function(){
if(window.neworientation.current === 'portrait|landscape'){
// do something……
} else {
// do something……
}
}, false);Một đóng góp nhỏ cho câu trả lời của hai kẻ ngốc:
Như được mô tả trên bảng trên sự kiện "định hướng" của điện thoại droid được kích hoạt sớm hơn sự kiện "thay đổi kích thước", do đó chặn cuộc gọi thay đổi kích thước tiếp theo (vì câu lệnh if). Thuộc tính chiều rộng vẫn chưa được đặt.
Một cách giải quyết mặc dù có thể không hoàn hảo có thể là không kích hoạt sự kiện "trao đổi định hướng". Điều đó có thể được lưu trữ bằng cách gói ràng buộc sự kiện "định hướng" trong câu lệnh "if":
if (!navigator.userAgent.match(/android/i))
{
window.addEventListener("orientationchange", checkOrientation, false);
}Hy vọng nó giúp
(các thử nghiệm đã được thực hiện trên Nexus S)