@media查詢無法在移動設備上運行

Question

我已經嘗試了所有發現的結果，但沒有結果。

我制作了一個非常簡單的帶有媒體查詢的網頁。 它在台式機上運行良好，但是當我在任何移動設備上打開它時，媒體查詢均無法正常工作。

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

Answer 1

您的媒體查詢與相應的斷點分辨率不匹配。 您的斷點僅適用於Extra Small設備（例如舊的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) {...}

@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