媒体查询在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会覆盖它。