Как исправить неправильное отображение веб-страницы на Android (возможно, проблема с CSS - работа с Bootstrap) - PullRequest
Новая
       31

Как исправить неправильное отображение веб-страницы на Android (возможно, проблема с CSS - работа с Bootstrap)

0 голосов
/ 23 января 2019

новинка с Bootstrap и все еще в процессе обучения.

Моя цель - сделать одностраничный веб-сайт с фоновым изображением, размер которого изменяется в соответствии со страницей браузера, все выглядит хорошо;однако 1 большая проблема:

  • Страница выглядит великолепно во многих браузерах и платформах, только в браузерах Android (Chromium), кажется, что мое фоновое изображение смещено на половину страницы вверх, ипоэтому содержимое также отображается некорректно (div, другой элемент, панель навигации, выглядит нормально)

Я долго искал, как это исправить (я уверен, что это связано с 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).Все остальные браузеры отображают мою страницу Ok.

1 Ответ

0 голосов
/ 29 января 2019

После долгих попыток и возни я нашел решение своего вопроса. Который пришел в другой поток из Переполнения стека (который я изначально упустил из виду, так как не знал, как правильно сформулировать проблему):

Сделать заполнить весь экран?

  • Что решило проблему для меня, так это просто добавить этот код в начало CSS: 

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




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