Chrome для Android: как включить поддержку мобильных устройств на веб-странице - PullRequest
Новая
       29

Chrome для Android: как включить поддержку мобильных устройств на веб-странице

0 голосов
/ 05 июня 2018

Я создал это http://nl4.christianity24.org/, используя PHP и mysqli, с помощью CSS 3. Я сделал сайт удобным для мобильных устройств с помощью Android Opera, но не могу сделать его дружественным для Android Chrome и Firefox.Что я должен делать.

Как использовать @media ();Какой лучший формат CSS 3 для мобильной точки зрения?

1 Ответ

0 голосов
/ 05 июня 2018

Чтобы обеспечить правильный рендеринг и масштабирование касанием для всех устройств, попробуйте добавить этот метатег в <head> вашего документа. 

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Затем вы можете настроить свой веб-сайт, используя различные медиазапросы, подобные этому. 

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) {
    body {
        background-color: red;
    }
}

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) {
    body {
        background-color: yellow;
    }
}

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) {
    body {
        background-color: blue;
    }
}

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
    body {
        background-color: violet;
    }
}

Надеюсь, это поможет.

...