iPad 和移动设备的媒体查询

Question

我正在设计一个personal page 。我一直在使用 Chrome Canary 来确保我所有的媒体查询都符合要求。 Canary 中的一切都显示得非常好，并且所有所需的设备模式都可以正常工作。但是，当我在 iPad、iPhone 或 Blackberry 上打开我的页面时，它无法正确显示。对于手机，“精选作品”部分下方的所有内容均不显示。对于 iPad，“精选作品”之后的所有内容都显示在一个单列中，该列跨越页面宽度的 33.33%。我不知道为什么。

我的问题的 TL;DR 是：我的 HTML 或 CSS 文件中缺少什么，添加后将帮助我的页面在 iPad 和 iPhone 上正确显示？？

在我的 HTML 文件的头部，我使用：

最初，我唯一的媒体查询是：

@media 仅屏幕和（最大宽度：767px）

当我看到最初无法在 iPad 和 iPhone 上运行时，我添加了

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

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

在 Chrome 中工作时，我觉得一切都正常显示，直到图像变小（800 像素左右）。随着页面变小，出现了一些字体大小问题。我重组了页面的底部（在特色作品下方）并使用“@media only screen and (max-width: 767px)”查询来做到这一点。

我真的很困惑为什么我的 iPad 上的一切都显示得很奇怪。我尝试了不同的显示：（flex、inline、box）来解决 iPad 问题。一切都无济于事。

对于 iPhone 问题，我尝试复制“@media only screen and (max-width: 767px)”下的所有内容，并将其放在“@media only screen and (min-device-width : 320px)”下和（最大设备宽度：568px）”查询。但这没有用。

我没有尝试重写我的整个 CSS 文件。我的想法是，由于所有这些设备都有预定义的宽度，因此我可以将所有 div 宽度调整为实际的 px 值而不是百分比。但是，我觉得这是不必要的工作。

Answer 1

试试这个：编辑以适应边距...

.projectdeets {
    width: 100%;
    height: 30%;
    display: inline-block;
    max-height: 300px;
}
.project {
    width: calc(33.33% - 6px);
    height: 100%;
    margin: 0px 3px 0px 3px;
    float:left;
}