Question

我在移动HTML中添加了以下元标记

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

在我为移动版编写css文件之后，我意识到它在lanscape模式下看起来不太好，因为它有不同的宽度尺寸。我在右侧看到一个空的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作为宽度 - what units do you use for css for mobile web apps?

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

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

4 个答案: