android - 纵向页面不可见

Question

我正在尝试开发一个响应式网站。我已经在我的 PC 上测试了几个@media，到目前为止一切顺利。

当我将问题传到我的 Android 智能手机时，问题就开始了。出于某种原因，网站按应横向显示，但纵向显示空白页面。

我在 Firefox 和 Chrome 中测试过，问题是一样的。我确实注意到，如果我选择“阅读器 View ”，则可以读取页面内容，因此正在加载页面，另外，我安装了 HTML 源代码查看器，页面已完全加载。

我在两部不同的 Android 智能手机上进行了测试，分辨率相同:540 x 960 像素

您可以在此处找到该页面: http://www.chazard.eu/teste/cspreguengogrande

这是我的 CSS:

@charset "utf-8";
/* CSS Document */

* { padding: 0; margin: 0; }

html,
body{
    min-height:100%;
    width:100%;
    z-index:-10;
}

#Background{
    position:absolute;
    position:fixed;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    display:block;
    z-index:1;
}

#Background_Left{
    float:left;
    width:50%;
    height:100%;
    background:url(images/background_left.jpg) fixed;
    background-repeat:no-repeat;
    background-position:left;
    background-size:contain;
}

#Background_Right{
    float:right;
    width:50%;
    height:100%;
    background:url(images/background_right.jpg) fixed;
    background-repeat:no-repeat;
    background-position:right;
    background-size:contain;
}

#mainDIV{
    position:relative;
    margin: 0 auto;
    width:1000px;
    min-height:100%;
    z-index:10;
}

#BotoesContainer{
    position:relative;
    height:200px;
    background:url(images/banner.png);
    background-repeat:no-repeat;
    background-size:contain;
}

#ConteudoContainer{
    position:relative;
    padding-bottom:70px;
}

/* --------------------------------------------------
Smartphone / Tablet View Port < 960 px width Horizontal
 --------------------------------------------------*/

@media (max-device-width: 960px) and (orientation: landscape){
    #mainDIV{
        width:600px;
    }
}

/* --------------------------------------------------
Smartphone / Tablet View Port < 540 px width Horizontal
 --------------------------------------------------*/

@media (max-device-width: 540px) and (orientation: portrait){
    #mainDIV{
        width:520px;
    }

    #Background{
        display:none;
    }
}

我删除了一些非必要的 CSS。

有什么建议吗？

Answer 1

使用 max-width 而不是 max-device-width。此外，如果它是桌面站点，您可能需要使用带有 max-width: 980px 的媒体查询。

原因:

max-width 是指视口(viewport)的宽度，可与 max-height 一起用于定位特定尺寸或方向。

max-device-width 是指设备 的视口(viewport)大小，与方向、当前比例或调整大小无关。