Question

我有一个担忧。我正在组建一个小网站，由于某种原因，我的iphone和ipad媒体查询正在发生冲突。 Iphone采用了Ipad风格，但反之亦然。所以我想把我正在使用的东西放在那里，看看是否有人可以提供帮助。

谢谢你们。

@media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) //iphone
@media screen and (max-device-width: 480px) and (orientation:landscape) //iphone landscape
@media screen and (max-device-width: 1024px) and (orientation:landscape) //ipad landscape
@media screen and (max-device-width: 768px) and (orientation:portrait) //ipad portrait

我从一些似乎非常合法的教程中提取这些内容，以及为什么样式泄漏的任何想法？

Answer 1

你正在使用max-device-width，它也包括iphone。应该是：

@media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) //iphone
@media screen and (max-device-width: 480px) and (orientation:landscape) //iphone landscape
@media screen and (min-device-width: 1024px) and (orientation:landscape) //ipad landscape
@media screen and (min-device-width: 768px) and (orientation:portrait) //ipad portrait

注意min-device-width

iphone / ipad媒体查询问题

1 个答案: