@media查询无法在移动设备上运行

Question

I have tried everything I found, without result. 我已经尝试了所有发现的结果，但没有结果。

I made a very simple web page with media query. 我制作了一个非常简单的带有媒体查询的网页。 It works fine in desktop, but when I open it on any mobile, the media queries are not working. 它在台式机上运行良好，但是当我在任何移动设备上打开它时，媒体查询均无法正常工作。

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

Answer 1

Your media query does not match with respective breakpoint resolutions. 您的媒体查询与相应的断点分辨率不匹配。 Your breakpoints only works for Extra Small devices (like the old Nokia, Blackberry...) 您的断点仅适用于Extra Small设备（例如旧的Nokia，Blackberry ...）

Use the following breakpoints instead, 请改用以下断点，

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

@media查询无法在移动设备上运行

问题描述

1 个解决方案

解决方案1
1 2018-04-25 10:01:59

@media查询无法在移动设备上运行

问题描述

1 个解决方案

解决方案1 1 2018-04-25 10:01:59

解决方案1
1 2018-04-25 10:01:59