Question

我已经在stackoverflow上研究了这个问题，但我还是无法解决它。如果可以，请提供帮助：）

我正在使用wordpress主题Hatch，其中包含的媒体查询似乎并未影响任何iphone（4或5）。

这是我使用的html中的viewport语句：

<meta name="viewport" content="width=device-width, initial-scale=1">

我还尝试过我能想到的媒体查询的每个变体。目前，我正在使用：

@media only screen and (max-width: 480px) and (orientation:portrait) {

    .wrap { 
    max-width: 300px;
    border: 1px solid red; 
    }
}

我也试着无济于事：

@media only screen and (max-device width: 480px) and (orientation:portrait) {

    .wrap { 
    max-width: 300px;
    border: 1px solid red; 
    }
}

提前感谢任何能够提供帮助的人。

Answer 1

尝试使用这些

以纵向模式

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) <-- 568px for iphone 5, 480px for iphone 4 -->
and (orientation : portrait) { 
   /* STYLES GO HERE */ 
}

纵向和;景观

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 
   /* STYLES GO HERE */
}

Answer 2

哦，伙计我是叮咚！问题是媒体查询上方的CSS代码中存在不匹配的问题。

课程：当NOTHING正常工作并且没有任何意义时，它几乎总是在代码中的某个地方变小。好吧有时候。

感谢大家的帮助！

媒体查询无法在任何iphone上运行

2 个答案: