iPad和移動設備的媒體查詢

Question

我正在設計個人頁面 。 我一直在使用Chrome Canary來確保所有媒體查詢都符合要求。 在Canary中一切都顯示得非常好，並且所有所需的設備模式都可以正常工作。 但是，當我在iPad，iPhone或Blackberry上打開頁面時，頁面無法正確顯示。 對於手機，“特色工作”部分下方的所有內容均不會顯示。 對於iPad，“精選作品”之后的所有內容均向下顯示一列，占頁面寬度的33.33％。 我不知道為什么。

我的問題的TL; DR是：我的HTML或CSS文件中缺少什么，添加這些文件將有助於我的頁面在iPad和iPhone上正確顯示？

在我的HTML文件的開頭，我使用：

最初，我僅有的媒體查詢是：

@media only屏幕和（最大寬度：767px）

當我看到最初無法在iPad和iPhone上運行時，我添加了

@僅限純媒體屏幕，（最小設備寬度：768像素）和（最大設備寬度：1024像素）{

@僅限純媒體屏幕，（最小設備寬度：320像素）和（最大設備寬度：568像素）{

在Chrome瀏覽器中工作時，我覺得一切正常顯示，直到圖像變小（大約800像素）為止。 隨着頁面變小，存在一些字體大小問題。 我調整了頁面的底部結構（在Featured Work下面），並使用“僅@media屏幕和（最大寬度：767px）”查詢來完成。

我真的很困惑為什么iPad上的所有內容顯示都不正常。 我嘗試了不同的顯示方式：（flex，inline，box），以解決iPad問題。 所有人都無濟於事。

對於iPhone問題，我嘗試將所有內容復制到“ @media only屏幕和（max-width：767px）”下，並將其放在“ @media only屏幕和（min-device-width：320px）和（max -device-width：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;
}