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

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);