2012-01-31 28 views
8

Tôi đang cố gắng sử dụng thiết bị HTML5 Sự kiện sắp xếp trong Javascript để xoay hình ảnh khi người dùng xoay iPhone của mình xung quanh.Kiểm tra hỗ trợ phần cứng trong Javascript cho các sự kiện định hướng thiết bị của iPhone 3GS

tôi sử dụng mã này để phát hiện khi con quay đang chuyển động:

window.addEventListener('deviceorientation', function (e) { 
    alpha = e.alpha; 
    beta = e.beta; 
    gamma = e.gamma;    
}, true); 

Nó thực sự hoạt động tốt trên iPhone 4+ và iPad 2, nhưng không có con quay hồi chuyển trên 3GS (và iPhone cũ). Đó là lý do tại sao tôi đang thử nghiệm deviceOrientationSupport như thế này:

if(window.DeviceOrientationEvent){ // gyroscope support 
    alert('DeviceOrientationEvent support OK'); 
} else { 
    alert('DeviceOrientationEvent support KO'); 
} 

Tôi đã nhìn thấy mã này trên nhiều trang web hoặc diễn đàn, nhưng vấn đề của tôi là với 3GS iPhone của tôi dưới IOS 5.0.1, thử nghiệm này cho thấy tôi: deviceOrientationSupport OK!

Tôi nghĩ rằng kiểm tra thử nghiệm này chỉ khi Safari là khả năng xử lý những sự kiện này :(

Vì vậy, câu hỏi của tôi là, là nó có thể để thêm một thử nghiệm để biết nếu phần cứng có thể bắn các sự kiện định hướng?

Cảm ơn!

Trả lời

3

Sau khi gặp vấn đề tương tự như trên, tôi cũng gặp sự cố với iPad/iPhone cũ hơn, thậm chí không gọi chức năng trên addEventListener. Vì vậy, tôi thấy rằng những điều sau đây đã làm việc tốt hơn rất nhiều cho tôi và loại bỏ bất kỳ cơ hội nào của một thiết bị không được hỗ trợ vượt qua (điều này được ngồi với một màn hình tải vì vậy nó yêu cầu một khoảng thời gian trước khi hoàn thành kiểm tra đầy đủ của nó.).

var _i = null; 
var _e = null; 
var _c = 0; 

var updateDegree = function(e){ 
    _e = e; 
} 

window.addEventListener('deviceorientation', updateDegree, false); 

// Check event support 
_i = window.setInterval(function(){ 
    if(_e !== null && _e.alpha !== null){ 
     // Clear interval 
     clearInterval(_i); 
     // > Run app 
    }else{ 
     _c++; 
     if(_c === 10){ 
      // Clear interval 
      clearInterval(_i); 
      // > Redirect 
     } 
    } 
}, 200); 
0

trong khi không có Gyroscope trên 3GS, nó là hoàn toàn có khả năng phát hiện những thay đổi hướng thiết bị sử dụng gia tốc kế nó đã xây dựng trong. iOS đã được sự ủng hộ này kể từ khi chiếc iPhone đầu tiên.

+0

Hi, tôi chỉ có thể phát hiện thiết bị ** Chuyển động ** tổ chức sự kiện với 3GS! Mã được viết ở trên, với Trình nghe DeviceOrientationEvent, hoạt động tốt với iPhone 4 và iPad 2 nhưng không hoạt động trên iPhone 3GS. – MavBzh

4

Tôi hy vọng điều này không đến với bạn quá muộn, nhưng không phải là bực bội khi Safari for iOS 4.2+ sẽ đăng ký DeviceOrientationEvent trên iPhone 3GS (hoặc các thiết bị khác không có con quay hồi chuyển)?

Dòng dưới cùng, DeviceOrientation không hoạt động với iPhone 3GS. Nhưng như một ai đó đã đề cập, DeviceMotionEvent hoạt động, nhưng bạn phải truy cập dữ liệu sự kiện theo một cách khác với cách bạn làm với một thiết bị có con quay hồi chuyển (ngớ ngẩn mà tôi biết!).

Bước đầu tiên: Tôi đã thêm biến trong kết hợp để nắm bắt liệu OrientationEvent có thực sự kích hoạt với bất kỳ dữ liệu không null nào không (nếu nó có con quay hồi chuyển).

var canHandleOrientation; 
if (window.DeviceOrientationEvent) { 
    window.addEventListener("deviceorientation", handleOrientation, false); 
} 

function handleOrientation(event){ 
    console.log("Orientation:" + event.alpha + ", " + event.beta + ", " + event.gamma); 
    canHandleOrientation = event; // will be either null or with event data 
} 

Bây giờ bạn biết sự kiện có thực sự có dữ liệu con quay hồi chuyển hay không! Vì vậy, nếu bạn muốn mặc định cho cái gì khác (ví dụ: window.DeviceMotionEvent), bạn có thể sử dụng một điều kiện.

if (!canHandleOrientation) { 
    console.log("There is no gyroscope") 
} 

tôi thử nghiệm này trên Mobile Safari cho iPhone 3GS (không con quay hồi chuyển) và iPad 2 (con quay hồi chuyển) và Chrome trên Macbook Pro của tôi (con quay hồi chuyển). Dường như làm việc.

Bây giờ, nếu bạn muốn để có được các dữ liệu DeviceMotionEvent như một sự thay thế nếu dữ liệu Định hướng không có sẵn, sau đó ...

if (window.DeviceMotionEvent && !canHandleOrientation) { 
    window.addEventListener('devicemotion', handleMotion, false); 
} 

function handleMotion(event){ 
    if(event.acceleration){ 
    //requires a gyroscope to work. 
    console.log("Motion Acceleration: " + event.acceleration.x + ", " + event.acceleration.y + ", " + event.acceleration.z); 
    } 
    else{ 
    //this is for iPhone 3GS or a device with no gyroscope, and includes gravity. 
    console.log("Motion AccelerationGravity: " + event.accelerationIncludingGravity.x + ", " + event.accelerationIncludingGravity.y + ", " + event.accelerationIncludingGravity.z); 
    } 
} 

này nên bao gồm các căn cứ của bạn đối với hầu hết các thiết bị với một trình duyệt webkit .. . Tôi hi vọng. Havent đã thử nghiệm nó trên bất kỳ thiết bị Android nào.

Cần lưu ý, mỗi sự kiện trả về các số khác nhau, vì vậy bạn có thể cần thực hiện một số công việc để chuẩn hóa chúng. Nhưng đây là những điều cơ bản về cách bạn truy cập chúng.

Hãy cho tôi biết nếu điều này có ích!

+0

Hi Arjun! Tôi chỉ muốn cảm ơn vì bạn đã cho tôi những thông tin hữu ích trong câu trả lời của bạn. Tôi hy vọng bài đăng này cũng sẽ giúp những người phát triển khác đối mặt với hành vi khó khăn này trong Safari. – MavBzh

0

Tôi gặp sự cố tương tự mà Màn hình nền của tôi cũng chấp nhận sự kiện window.DeviceOrientationEvent. Tôi sử dụng đoạn mã sau để kiểm tra xem có hỗ trợ định hướng trong các thiết bị di động:

var deviceSupportOrientation = false; 
window.onload = function() { 
    if (window.DeviceOrientationEvent) { 
     window.addEventListener("deviceorientation", function() { 
      deviceSupportOrientation = true; 
      window.removeEventListener('deviceorientation'); 
     }, false); 
    } 
}; 

JSFiddle: http://jsfiddle.net/7L5mg8hj/1/]

+0

Đã kiểm tra Fiddle này trên máy tính bảng S4 di động và S4. Trên máy tính bảng, dữ liệu định hướng thiết bị luôn là '0', nghĩa là sự kiện được hỗ trợ nhưng dữ liệu không có nghĩa là nó trượt qua không hỗ trợ' định hướng '. Cẩn thận ở đó. – lowtechsun

Các vấn đề liên quan