媒体查询在 iPhone 上的显示方式不同

Question

我正在尝试通过使用媒体查询使我的网站具有一定的响应能力，但它们似乎不起作用。

它应该看起来像这样：

http://mobt.me/3tPS

这是实际的网站：

http://sandbox.rdonohue.ca/

但是当我在手机上打开实际网站时，我会看到完整的网站，但网站名称居中。我搜索了 iPhone 5 的媒体查询，所以我可以看到它的外观，但就像我说它似乎不起作用。

这是我的 CSS：

@media only screen and (min-device-width : 320px){

.titleName {
    text-align: center;
    padding-left: 0px;
}

.landingImage {
    height: 200px
}

.mainContentTitle {
    text-align: center;
    width: 100%;
}

.mainContentTitle h5 {
    padding-left: 10%;
}

.mainContentSnippet {
    width: 90%;
}

}

瑞恩

Answer 1

这是 iPhone5 媒体查询： @media only screen and (min-device-width : 320px) and (max-device-width : 568px)

您可能还需要针对视网膜屏幕设置像素密度： -webkit-min-device-pixel-ratio: 1.5 min--moz-device-pixel-ratio: 1.5 -o-min-device-pixel-ratio: 3/2

还要仔细检查媒体查询之后是否没有 css 会覆盖它。