CSS 媒体查询不起作用答案

【问题标题】：CSS Media-Query Not WorkingCSS 媒体查询不起作用
【发布时间】：2014-06-04 09:54:51
【问题描述】：

我正在完成一项 TAFE 作业，以创建一个完整的响应式设计网站，但我的响应式部分存在问题。对于移动设备（iPad、iPhone、iPod Touch 已经过测试），他们遵循的唯一查询是screen and (max-width:1000px)，尽管我的 iPad 的屏幕宽度为 798 像素，而我的 iPod Touch 的宽度为 320 像素。

所以在我所有的媒体查询中，移动设备只排在前两个之后。

@media screen and (max-width: 1180px) {
    body {
        margin: 0 5%;
    }
}

@media screen and (max-width: 1000px) {
    body {
        margin: 0;
    }
}

@media screen and (max-width: 900px) {
    body header h1 {
        right: 1%;
    }
}

@media screen and (max-width: 800px) {
    body header h1 {
        bottom: 22%;
    }
}

@media screen and (max-width: 700px) {
    body #content-wrap #right {
        display: none;
    }

    body #content-wrap #left {
        width: calc(100% - 2.54%);
    }
}

@media screen and (max-width: 690px) {
    body header {
        /* background-position: 40% -100px; */
        background-position: 40% -130px;
    }
}

@media screen and (max-width: 520px) {
    body header h1 {
        font-size: 220%;
    }
}

它的这种行为是否有原因？有没有办法解决它？

编辑：桌面浏览器在调整大小时遵循所有这些规则。

【问题讨论】：

并注意 iWhatever 设备，其中许多设备不会随方向改变宽度。它们“具有”相同的宽度和高度纵向和横向。

标签： ios css media-queries

【解决方案1】：

将此添加到您的<head>：

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

➔Documentation

【讨论】：

【解决方案2】：

确保你有：

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

【讨论】：