Масштабирование окна просмотра не работает на мобильном устройстве - PullRequest
Новая
       12

Масштабирование окна просмотра не работает на мобильном устройстве

0 голосов
/ 29 марта 2020

Я все еще довольно новичок в создании веб-сайтов, и этот веб-сайт, над которым я сейчас работаю, находится на ранней стадии разработки, но я хотел бы сделать его адаптивным для мобильных устройств. Я добавил этот метатег <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">, но, похоже, он не работает, единственное, что работает, это user-scalabel=no. Я пробовал разные вариации масштаба и кучу разных аргументов, но результат все тот же. Вероятно, есть проблема с css. Любые идеи? Спасибо. 

function anim() {


            $(".slider").delay(1000).animate({
                width: 'show',

            }, 1000);

}

$(document).ready(function () {
    $('.carousel').carousel({
        pause:"false"

    })
})
body {
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: moccasin;
}


.secondpic {
    margin-top: 10%;
    display: block;
    width: 100%;
    overflow: hidden;
    height: auto;
    position: relative;
}

.arrow {
    margin-top: 10%;
    overflow: hidden;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
    height: auto;
    position: relative;
}

#text {
    overflow: hidden;
    position: relative;
    text-align: center;
    bottom: 5vw;
    transform: rotate(-2deg);
    font-size: 1.9vw;
    color: #634731;
    font-weight: bold;
}

.slider {

    display: none;
    position: absolute;
    right: -60px;
    top: 0;
}

.container {
    margin-right: 0;
}

.navbar {
    top: -100px;
    white-space: nowrap !important;
    padding-top: 100px !important;
    float: right;
    background-color: transparent;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
    z-index: 10;
    right: 0;
    padding-right: 0;
    position: fixed;
    opacity: 1;
    margin: 0;
}

.buttons {
    padding-bottom: 0;
    margin-bottom: 0px !important;
    margin-right: -1px;
    -moz-transition: 0.2s linear;
    -ms-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    -webkit-transition: 0.2s linear;
    transition: 0.2s linear;
}

.logo {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.text-white {
    padding-top: 15px !important;
    padding-bottom: 5px !important;
}

.bg-secondary {
    background-color: rgba(225, 159, 113, 1) !important;

}

.buttons a:hover {
    background-color: orange !important;
}
image

JSfiddle

Неправильная раскладка на телефоне

Я не могу заставить фрагмент и JSfiddle работать должным образом, но это должно дать вам идею.

Ответы [ 2 ]

0 голосов
/ 29 марта 2020

Я вижу, что у вас есть проблема с разметкой. У вас <header> внутри <html>, и это неправильно. Тег <html> имеет только 2 детей: <head> и <body>. Итак, <header> должен быть внутри <body>, и, возможно, в этом проблема, потому что ваши метатеги в порядке. Вы можете прочитать больше об анатомии HTML документа здесь (прокрутите немного)

0 голосов
/ 29 марта 2020

вам нужно использовать Media Query вот так: 

@media only screen and (max-width: 600px) {
  body {
    // css
  }
}
...