Почему моя CSS Grid отзывчива на настольном компьютере, но не на мобильном? - PullRequest
Новая
       22

Почему моя CSS Grid отзывчива на настольном компьютере, но не на мобильном?

0 голосов
/ 31 января 2020

Мой веб-сайт использует CSS Grid, и по умолчанию используется мобильный макет. Когда разрешение составляет 768 или больше, используется переход к версии сетки с «большим экраном». Я тестировал эту функцию в Chrome, и она прекрасно работает, однако, когда я тестирую на своем iPhone или использую параметры устройства Chrome, сайт никогда не изменяет размеры.

Можете ли вы помочь мне выясните, почему мой сайт реагирует в браузере на настольном компьютере, а не на мобильном (в мобильном переводчике Chrome или на моем реальном телефоне)?

В теге <head> я устанавливаю область просмотра, используя Я считаю, что это лучшая практика:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

В W3school я нашел небольшой скрипт для отображения разрешения, в котором написано "375px", поэтому сайт должен переключиться на мобильный .

Мой сайт по умолчанию (mobile-first) настроен в следующем коде в моем файле css (SCSS / SASS): 

.site-wrapper {
    margin: 0;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto 260px min-content min-content min-content min-content 40px;
    grid-template-areas:
        "logo"
        "tbanner"
        "navbar"
        "cmain"
        "ads"
        "contact"
        "footer";
}

Непосредственно под этим кодом находится носитель запрос, который устанавливает более сложную сетку CSS, если экран больше, как вы можете видеть здесь: 

@media only screen and (min-width: 768px) {
    .site-wrapper {
        margin: 0;
        display: grid;
        grid-template-rows: auto 260px auto auto 40px;
        grid-template-columns:   1fr     490px   260px   1fr;
        grid-template-areas:
                                "lmargin logo    contact rmargin"
                                "lmargin tbanner tbanner rmargin"
                                "lmargin navbar  navbar  rmargin"
                                "lmargin cmain   ads     rmargin"
                                "lmargin footer  footer  rmargin";
    }
}

Очевидно, что сайт все еще находится в разработке, но на момент написания этой статьи (31 января, 2020), вы можете увидеть мой сайт здесь: https://billraymond.github.io/cambermast-website/

И репо здесь: https://github.com/BillRaymond/cambermast-website

Спасибо.

...