iPad和移动设备的媒体查询

Question

I am designing a personal page . I've been using Chrome Canary to make sure all my media queries were in line. Everything shows really well in Canary and all the desired device modes work properly. However, when I open my page on an iPad, iPhone, or Blackberry it doesn't display correctly. For mobile phones, everything below the Featured Work section does not display. For iPads, everything after "Featured Work" displays down a single column which spans 33.33% of the page width. I am not sure why.

The TL;DR of my question is: What am I missing in my HTML or CSS file that, when added, will help my pages display properly on iPads and iPhones??

In head of my HTML file, I use:

Initially, the only media query that I had was:

@media only screen and (max-width: 767px)

When I saw that didn't initially work on iPad and iPhone I added

@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) {

When working within Chrome, I felt everything displayed properly until the images got to small (800px or so). There were some font size issues as the page got smaller. I restructure the bottom part of the page (below Featured Work) and do that using the "@media only screen and (max-width: 767px)" query.

I'm really stumped as to why everything is displaying oddly on my iPad. I've tried different display: (flex, inline, box), to address the iPad issue. All were to no avail.

For the iPhone issue, I've tried copying everything under the "@media only screen and (max-width: 767px)" and put it under the "@media only screen and (min-device-width : 320px) and (max-device-width : 568px)" query. But that didn't work.

I haven't attempted re-writing my entire CSS file. My thoughts are that since all these devices have predefined widths that I could adjust all my div widths to actual px values instead of percentages. However, I feel that is unneccessary work.

Answer 1

Try this: Edited to accommodate for the margins...

.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;
}