Question

我正在尝试开发一个响应式网站。我已经在我的电脑上测试了几个@media，到目前为止一直很好。

问题开始了，我传到我的Android智能手机上了。出于某种原因，该网站呈现为横向方向，但在纵向方向呈现空白页面。

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

我在两款不同的Android智能手机上进行了测试，分辨率相同：540 x 960 px

您可以在此处找到该页面： 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是指视口的宽度，可用于与max-height一起定位特定尺寸或方向。

无论方向，当前比例或调整大小，

max-device-width都指设备的视口大小。

页面纵向不可见

1 个答案: