html - 如何修复无法在Android上正确显示的网页(可能是CSS问题-使用Bootstrap)

标签 html twitter-bootstrap css google-chrome display

Bootstrap的新功能,并且仍处于学习曲线上。

我的目标是建立一个单页网站,其背景图像根据浏览器页面的大小进行调整,一切看起来都不错;但是,有一个大问题:


该页面在许多浏览器和平台上看起来都很好,仅在Android浏览器(Chromium)中,看来我的背景图片移动到了页面的一半,因此内容也因此无法正确显示。(一个div,另一个元素,导航栏显示为正常)


我一直在努力解决此问题(很确定这与CSS有关)。
关于如何更改代码以改善此问题的任何建议?

谢谢大家的帮助,
安吉


网站地址为http://www.angiemathot.net
正常外观http://www.angiemathot.net/stuff/norm.png
Android在Chromium http://www.angiemathot.net/stuff/android.png中会发生什么
这是为该页面运行的CSS代码(我的覆盖内容很可能是问题所在):


    html body {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-image: url(/assets/nature-glacier-lake.jpg);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: auto;
    margin-top: 0px;

}


/* paragraph padding and center alignment */
p{
    padding: 50px;
    font-size: 30px;
    color: white;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    background: none;
}




/* totally centered block - horizontally */
.container-angie {
    width: 100%;
    display: flex;
    margin-right: auto;
    margin-left: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: auto;
}




a:link {
    color: white;
    text-decoration: none;
}

a:visited {
    color: lightpink;
}

a:hover {
    color: deeppink;
}

a:active {
    color: deeppink;
}  





.navbar-nav > li > a, .navbar-brand {
    padding-top:5px !important; padding-bottom:0 !important;
    height: 30px;
}
.navbar {min-height:30px !important;}

.navbar-toggle {
     padding: 0 0;
     margin-top: 7px;
     margin-bottom: 0;
}




.vertical-center {
    min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
    min-height: 100vh; /* These two lines are counted as one :-)       */
    height: auto;

    display: inline-flex;
    align-items: center;
}


我已经研究过CSS代码,因为我认为这是不兼容的问题(使用Bootstrap 3)。其他所有浏览器似乎都可以显示我的页面。

最佳答案

经过多次尝试和摆弄,我确实找到了解决我问题的方法。这是来自Stack Overflow的另一个线程(我最初忽略了它,因为我不知道如何正确地表达问题):

Make <body> fill entire screen?


对我来说解决问题的只是将以下代码添加到CSS的开头:




html {
   margin: 0;
   height: 100%;
   width: 100%;
}




body {
   margin: 0;
   min-height: 100%;
   width: 100%;
}

关于html - 如何修复无法在Android上正确显示的网页(可能是CSS问题-使用Bootstrap),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54328193/

相关文章:

html - Bootstrap 3 : Is there a way to hide navbar-text when small screens are used?

html - 适合对象 : cover - is not working with video tags without border-radius

php - Codeigniter LongPolling "while(true)"不起作用?

HTML5 和 Css3 - 页脚重叠 - - 响应式网页设计

css - 根据该元素中的值将 css 分配给该元素

javascript - 动态添加和删除滚动上的 div?

javascript - Bootstrap Tour 不会加载到模态框上

javascript - Bootstrap 网格对齐与 Angular JS

javascript - 如果 div 在滚动时可见,则设置动画并更改主体的背景颜色

html - 是否可以移动复选框的 "box"?