Запросы @media не работают на мобильных устройствах - PullRequest
Новая
       5

Запросы @media не работают на мобильных устройствах

0 голосов
/ 25 апреля 2018

Я перепробовал все, что нашел, безрезультатно.

Я сделал очень простую веб-страницу с медиа-запросом.Он отлично работает на рабочем столе, но когда я открываю его на любом мобильном телефоне, медиа-запросы не работают.

html: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, minimun-scale=1.0, maximun-scale=1.0">
    <title>Scordatura</title>
    <meta name="description" content="Scordatura - Próximamente">
    <meta name="keyboards" content="scordatura, vigo, a coruña, galicia">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <h1>Hello,<br>my name is<br>Scordatura,<br>nice to meet<br>you.</h1>
</body>
</html>

css: 

h1{
    font-size: 72px;
}

@media only screen and (max-width: 400px){
    h1{
        font-size: 64px;
    }
}

@media only screen and (max-width: 350px){
    h1{
        font-size: 52px;
    }
}

@media only screen and (max-width: 300px){
    h1{
        font-size: 38px;
    }
}

1 Ответ

0 голосов
/ 25 апреля 2018

Ваш медиа-запрос не совпадает с соответствующими разрешениями точек останова. Ваши контрольные точки работают только для сверхмалых устройств (таких как старые Nokia, Blackberry ...)

Вместо этого используйте следующие точки останова, 

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
...