时间戳

首页 > 解决方案 > @media 查询不适用于移动设备

html - @media 查询不适用于移动设备

问题描述

我已经尝试了我发现的一切，但没有结果。

我用媒体查询制作了一个非常简单的网页。它在桌面上运行良好，但是当我在任何移动设备上打开它时，媒体查询都不起作用。

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;
    }
}

标签： htmlcssmedia-queries

解决方案

您的媒体查询与相应的断点解决方案不匹配。您的断点仅适用于超小型设备（如旧的诺基亚、黑莓...）

请改用以下断点，

/* 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) {...}

推荐阅读