Question

我正在设计一个personal page 。我一直在使用Chrome Canary来确保我的所有媒体查询都符合要求。 Canary中的一切都表现得非常好，所有想要的设备模式都能正常工作。但是，当我在iPad，iPhone或Blackberry上打开我的页面时，它无法正确显示。对于手机，“特色工作”部分下方的所有内容均不会显示。对于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中工作时，我感觉一切正常，直到图像变小（800px左右）。随着页面变小，存在一些字体大小问题。我重新构建页面底部（特色工作下面）并使用“@media only screen and（max-width：767px）”查询来执行此操作。

我真的很难过为什么一切都在我的iPad上显示奇怪。我尝试过不同的显示器:( flex，inline，box），以解决iPad问题。一切都没有用。

对于iPhone问题，我尝试复制“@media only screen and（max-width：767px）”下的所有内容并将其放在“@media only screen”下（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;
}

iPad和移动设备的媒体查询

1 个答案: