根据屏幕方向更改 url答案

【问题标题】：Change url according to screen orientation根据屏幕方向更改 url
【发布时间】：2022-10-24 21:52:04
【问题描述】：

我在 WordPress 中创建了一个网站，并希望在智能手机从任何页面处于横向位置时显示联系页面。我还需要智能手机在我将其转到纵向位置之前返回到我所在的页面。

我尝试了以下代码，但是当我将智能手机放回纵向时，它总是将我带回主页。

let landscape = window.matchMedia("(orientation: landscape)");

landscape.addEventListener("change", function(e) {
    if(e.matches) {
        window.location.href = "https://website.com/contacts/";
    } else {      
        window.history.back();
    }
})

你能帮我理解有什么问题吗？

谢谢！

【问题讨论】：

你确定window.history.back(-1) 回到一页吗？正确的语法是 window.history.back() 或 window.history.go(-1)
谢谢你的回复。对不起，我粘贴了错误的代码。我尝试了您的两种语法，但不仅返回主页一页。
尝试 console.log 在你的函数中查看它是否被多次调用

标签： javascript wordpress

【解决方案1】：

多么有趣的行为。我想知道它是为了什么...

你应该只听方向本身。您可以使用screen.orientation，但 Safari 和 iOS 上的 Safari 都不支持它。

对于 Safari IOS，我们可以使用已弃用（但不适用于 Safari IOS）orientationchange。

/**
 * Redirect on orientation change.
 * 
 * @since 1.0.0
 */
screen.orientation.addEventListener('change', function() {
    if(screen.orientation.type === 'landscape-primary' || screen.orientation.type === 'landscape-secondary') {
        window.location = "https://website.com/contacts/";
    };
});

/**
 * Redirect on orientation change (Support for Safari IOS).
 * 
 * @since 1.0.0
 */
 if (navigator.userAgent.match(/ipad|iphone/i) && navigator.userAgent.match(/safari/i)) {
    window.addEventListener("orientationchange", function() {
        if(window.matchMedia("(orientation: landscape)").matches) {  
            window.location = "https://website.com/contacts/";
        };
    });
};

【讨论】：