ipad媒体查询问题

ipad媒体查询问题

本文介绍了iphone / ipad媒体查询问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个问题。我把一个小网站,由于某种原因,我的iphone和ipad媒体查询是冲突。 Iphone拿起Ipad风格,但反之亦然。所以我想把我在那里使用,看看是否有人可以帮助。

I had a concern. I'm putting together a little site and for some reason my iphone and ipad media queries are colliding. The Iphone picks up on Ipad styles, but not vice versa. So I wanted to put what I'm using out there and see if anyone can help.

谢谢你们。

@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


$ b b

我从几个看起来很合理的教程中提取了这些内容,任何想法为什么样式会泄露?

I pulled these from a few tutorials that seemed pretty legit, any ideas why the styles are leaking?

推荐答案

're使用max-device-width将包括iphone以及。应为:

You're using max-device-width which will include iphone as well. Should be:

@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

notice the min-device-width

这篇关于iphone / ipad媒体查询问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-06 13:04