Safari 上的 Javascript 屏幕方向

Question

我正在尝试制作一个响应式网站，它几乎完成了，但我需要帮助。

我正在使用这个例子来了解角度：

    angulo = screen.orientation || screen.mozOrientation || screen.msOrientation;
    
    Example angulo.angle

它返回 0，但它不适用于 Safari，仅适用于 MSF 和 Chrome。在 Safari 中，它显示：

TypeError: undefined is not an object (evaluating 'angulo.angle')

我能做什么？

Answer 1

如果您需要角度来确定您的页面是纵向模式还是横向模式，请使用以下方法：

document.addEventListener("orientationchange", updateOrientation);

你也可以使用 matchMedia

var mql = window.matchMedia("(orientation: portrait)");

// If there are matches, we're in portrait
if(mql.matches) {  
    // Portrait orientation
} else {  
    // Landscape orientation
}

// Add a media query change listener
mql.addListener(function(m) {
    if(m.matches) {
        // Changed to portrait
    }
    else {
        // Changed to landscape
    }
});

或者你可以使用一个resize事件

window.addEventListener("resize", function() {
    // Get screen size (inner/outerWidth, inner/outerHeight)

}, false);

David Walsh 的方便文章中有更多提示（但可能还有其他关于 SO 的示例）

Answer 2

Safari/Safari iOS（又名新 IE6）不支持 screen.orientation api。您必须改用 window.orientation （这不是有效的属性）

示例：http : //www.williammalone.com/articles/html5-javascript-ios-orientation/