javascript - 横向和纵向的不同视口(viewport)宽度

Question

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

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

效果很好，但仅限于纵向模式。如果我切换到横向，它也会使用 480 像素，这使得所有内容都太大。如果使用横向(仅限移动用户)，是否有办法通过脚本切换到更高的宽度？谢谢。

Answer 1

您可以使用 window.orientation 或 jQuery Mobile 方向事件

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

然后您可以更改视口(viewport)

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