html - iPad 和移动设备的媒体查询

Question

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

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

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

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

@media only screen and (max-width: 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;
}