媒体查询的iPad和移动

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

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

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

最初，只有媒体查询，我已是：只有

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

当我看到最初没有iPad和iPhone上我加

@media只有屏幕和（分设备宽度：768px）工作，（最大设备宽度：1,024） {

@media只有屏幕和（最小 - 设备宽度：320像素）和（MAX-设备宽度：568px）{

当内工作的铬，我感到一切正常显示，直到图像得小（800px左右）。页面变小时会出现一些字体大小问题。我重构了页面的底部部分（在Featured Work下面），并使用“仅限@media屏幕和（max-width：767px）”查询执行此操作。

我真的很难为什么一切都显示在我的iPad奇怪。我尝试了不同的显示方式：（flex，inline，box），以解决iPad问题。一切都无济于事。

对于iPhone问题，我尝试在“仅限@media屏幕和（max-width：767px）”下复制所有内容，并将其放在“@media only屏幕和（min-device-width：320px ）和（最大设备宽度：568px）“查询。但那并不奏效。

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

来源

2014-10-30 C Bailey

你检查出http://stephen.io/mediaqueries/？ – Sai 2014-10-30 03:19:47

感谢您的链接。我已经看到了该页面，并且帮助创建了上述的iPad和iPhone特定查询，但它并没有帮助解决我的问题。 – 2014-10-30 03:27:22

试试这个：编辑，以适应边缘...

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

来源

2014-10-30 03:45:12 Duetschpire

找到上面更新的答案。编辑以适应6px页边距 – Duetschpire 2014-10-30 03:59:16

是的！谢谢。这个问题现在已经解决了我的iPad。我最终在.project {width :;}下使用了32.74％。感谢iPad的帮助！ – 2014-10-30 04:05:59

很高兴我能帮到你。我仍然相信宽度：calc（33.33％ - 6px）;对于所有> 1024像素的媒体查询，即使在正常的显示器上，也应该正常工作。 – Duetschpire 2014-10-30 04:09:04

媒体查询的iPad和移动

回答

相关问题