页面纵向不可见

时间:2015-08-03 18:25:25

标签: android html css

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

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

我在Firefox和Chrome中测试过,问题是一样的。 我确实注意到,如果我选择"阅读器视图"可以读取页面的内容,因此正在加载页面,此外,我安装了一个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。

有任何建议吗?

1 个答案:

答案 0 :(得分:1)

使用max-width代替max-device-width。此外,您可能需要使用max-width: 980px媒体查询(如果是桌面版网站)。

原因

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

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

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