根据屏幕方向更改url

Question

我在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();
}
})

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

谢谢！

编辑：我重新做了一些测试，发现代码并不总是带我去主页，而是返回两页而不是一页

Answer 1

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

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

对于Safari IOS，我们可以使用不推荐使用的orientationchange(但不适用于Safari IOS(。

/**
* 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/";
};
});
};