Question

我的网站或多或少针对移动设备进行了优化，但它的最小宽度需要为480像素。使用

<meta name="viewport" content="width=480">

运作良好，但仅限于纵向模式。如果我切换到横向，它也使用480像素，这使得一切都太大了。如果使用横向（仅限移动用户），是否可以使用脚本切换到更高的宽度？谢谢。

Answer 1

您可以使用window.orientation或jQuery Mobile Orientation Event

http://www.w3schools.com/jquerymobile/jquerymobile_events_orientation.asp

<script>
  function doOnOrientationChange()
  {
    switch(window.orientation) 
    {  
      case -90:
      case 90:
        alert('landscape');
        break; 
      default:
        alert('portrait');
        break; 
    }
  }

  window.addEventListener('orientationchange', doOnOrientationChange);

  // Initial execution if needed
  doOnOrientationChange();
</script>

或JQuery

$(window).on("orientationchange",function(event){
  alert("Orientation is: " + event.orientation);
});

然后您可以更改视频

document.getElementById("viewport").setAttribute("content","width=640");

Answer 2

<meta id="myViewport" name="viewport" content="width=480" />
    <script>
        window.onload = function () {
            if(window.innerWidth >= 480) {
                var mvp = document.getElementById('myViewport');
                mvp.setAttribute('content','width=device-width', 'initial-scale=1');
            }
        }
     </script>

我用这个作为解决方案后，我意识到我忘记了平板电脑等更大的分辨率，这只会让我不得不做出十几个这样的步骤。它来自Why is CSS min-width causing my responsive site to be zoomed in on a mobile?。像魅力一样。

Answer 3

您可以在CSS中使用@media查询以及@viewport CSS标记，而不是元视口标记。这里有一个很好的解释：

http://www.html5hacks.com/blog/2012/11/28/elegantly-resize-your-page-with-the-at-viewport-css-declaration/

上述链接的一个例子：

@media (max-width: 699px) and (min-width: 520px) {
  @viewport {
    width: 640px;
  }
}

您可以使用此功能为纵向和横向设置不同的视口，以及更通用的更窄和更宽的屏幕。

景观和肖像的不同视口宽度

3 个答案: