如何根据纵向或横向模式(和方向更改)更改"initial-scale"？

Question

我无法根据iPhone是纵向还是横向模式(以及方向何时更改(更改"视口"初始比例"。

我想要纵向模式下的以下内容：

<meta name="viewport" content="width=device-width, initial-scale=0.5">

我想要以下横向模式：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我想要那些比例尺，在方向改变之后。

以下是我的两个不成功的努力：

<meta name="viewport" content="width=device-width, initial-scale=0.5">
<script type="text/javascript">
if($(window).width() < 900)
{
x=1;
if(x==1)
{
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0">');
x=0;
};
};
</script>

https://stackoverflow.com/a/15522332

<script>
if(screen.width>=1){
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=0.5">');
} else {
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=0.5">');
}
$(window).on("orientationchange",function(){
if(window.orientation == 0) // Portrait 
{
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=0.5">');
} else // Landscape 
{
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0">');
}
});
</script>

元视口只是在肖像上？

如果可以的话，我会去掉屏幕宽度部分，只关注页面是纵向还是横向。

Answer 1

您可以将window.matchesMedia与window上的orientationchange事件一起使用。

const meta = document.createElement('meta');
meta.name = "viewport";
if (window.matchMedia("(orientation: portrait)").matches) {
meta.content = "width=device-width, initial-scale=0.5";
} else {
meta.content = "width=device-width, initial-scale=1.0";
}
document.head.appendChild(meta);
window.addEventListener("orientationchange", function() {
if(window.orientation == 0){
meta.content = "width=device-width, initial-scale=0.5";
} else {
meta.content = "width=device-width, initial-scale=1.0";
}
}, false);