javascript - 如何根据设备方向调用两个 HTML 文件

Question

我正在从 JavaScript 函数调用两个 HTMLportrati.html文件ladnscape.html

使用以下代码，当我们第一次加载时它可以在浏览器上运行，但是当我们改变方向时它不会改变文件。

<SCRIPT language="JavaScript">
 if(window.innerHeight < window.innerWidth){
    window.location="Landscape/index.html";
} 
else if (window.innerHeight > window.innerWidth){
    window.location="Potrait/index.html";
}
</SCRIPT>

Answer 1

iOS 上的 Safari 有一个事件：

window.onorientationchange

您可以使用它来检测更改。

window.onorientationchange = function() {
    switch (window.orientation) {
        case 0: // portrait
            window.location = "Portrait/index.html";
            break;
        case 90: // Landscape
            window.location = "Landscape/index.html";
            break;
        case -90: // Other way round
            window.location = "OtherLandscape/index.html";
            break;
    }
}

这仅从 iOS 4 开始运行。如果您使用的是旧版本，则应使用 onresize-Event：

window.onresize = function() {
     if(window.innerHeight < window.innerWidth){
         window.location="Landscape/index.html";
     } 
     else if (window.innerHeight > window.innerWidth){
         window.location="Potrait/index.html";
     }
}

复制你的代码。