如何根据纵向或横向模式（和方向更改）更改“初始比例”？

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>

Meta Viewport just on Portrait?

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

Answer 1

您可以在window 上使用window.matchesMedia 和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);