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

Question

我在我的移动 HTML 中放置了以下元标记

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

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

除了为横向模式编写单独的 css 文件之外，还有什么办法摆脱这种情况吗？

Answer 1

您还需要绑定方向更改事件。您可以使用此示例脚本来执行此操作：

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

Answer 2

如果您的 css 布局基于屏幕百分比而不是绝对值，它应该允许您调整到任何屏幕布局而无需多个 css 文件就好了。

查看百分比选项：http ://www.w3schools.com/cssref/pr_dim_width.asp

或者，如果您有一个想要保持不变的布局，您可以将其居中。

Answer 3

中心对齐外包装。

body{
    max-width:786;/*target size of page*/
    margin:0 auto auto auto;
}

是最简单的方法。

Answer 4

您可以使用媒体查询来检测方向变化，并在同一个样式表中为每个都运行不同的样式。

同样对于移动设备，您最好使用 % 而不是 px 作为宽度 -对于移动 Web 应用程序的 css，您使用什么单位？

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}