媒体查询未在 Ipad 应用程序上显示任何输出

Question

我已经添加了我的媒体查询，当我运行在这个 site 下时，它似乎没有显示我预期的正确输出。这是我为这个手机做的第一个测试

这是我的媒体查询

@media screen and (min-width: 768px) and (max-width: 1024px), (min-device-width: 768px) and
(max-device-width: 1024px) and (orientation : landscape) {
    .wrap{
        width:95%;
        }

     .box{
     width:29.33%;
      float:left;
      margin:0px 42px 0px 0
    }   

    html{
        background-color:red;
    }
}

我对 body 进行了故障排除 html 但是背景颜色没有显示

这是我的site

我的CSS

.wrap{
    width: 90%;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

.box{
    width: 29.33%;
    float: left;
}

Answer 1

I have added my media Queries

但是您忘记了媒体查询中的一个关键要素，即元视口元素。例如。

<meta name="viewport" content="width=device-width, initial-scale=1">

您需要将其放置在页面的 head 中，媒体查询才能运行。

Answer 2

在你的 html 文件中你有

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

太旧了，我会用 html5 doctype

替换它

<!DOCTYPE html>

顺便说一句，那个地方看起来不错。

媒体查询未在 Ipad 应用程序上显示任何输出

Media Queries not displayed any output on Ipad application

css

mobile

android

media-queries