css - 媒体查询在 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.5min--moz-device-pixel-ratio: 1.5-o-最小设备像素比:3/2

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