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/