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

时间:2015-04-21 11:37:46

标签: javascript html mobile viewport

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

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

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

3 个答案:

答案 0 :(得分:0)

您可以使用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");

答案 1 :(得分:0)

<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?。像魅力一样。

答案 2 :(得分:0)

您可以在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;
  }
}

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