css - 具有相同 css 文件的不同屏幕方向

Question

我已将以下元标记放入我的移动 HTML 中

 <meta name = "viewport" content = "initial-scale = 1.0">

在我为移动版本编写 css 文件后，我意识到它在横向模式下看起来不太好，因为它具有不同的宽度尺寸。我在右侧有一个 160 像素的空白区域。

除了为横向模式编写一个单独的 css 文件之外，还有什么办法可以解决这个问题吗？

Answer 1

您还需要绑定(bind)方向改变事件。您可以使用此示例脚本执行此操作:

<script>
$(function(){

  function orient() {  
    if (window.orientation == 0 || window.orientation == 180) {
      $('.featured').css('display','none');
    orientation = 'portrait';
        return false;
    }
    else if (window.orientation == 90 || window.orientation == -90) {
      $('.featured').css('display','block');
        orientation = 'landscape';
        return false;
    }
  }

  $(window).bind( 'orientationchange', function(e){
    orient();
  });

})();

</script>