@media查询不适用于iPad纵向（已搜索所有问题）

Question

Evening all, I am having a problem in media queries for ipad portrait here is my code.

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){//CSS HERE }

I tried using min-device-width and max-device-width , I also tried using only screen and all in my queries. I also added viewports

<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="viewport" content="width=device-width">

However it's still not working on iPad portrait, keep in mind that all other media queries are working but this. Even when testing, using the inspect element it isn't taking the media queries into consideration.

Any help?

Answer 1

Could it be that the other media queries on your page are overriding the styles from this one (if the breakpoints overlap)? Try commenting out your other queries and see if this one works?

Answer 2

ANSWER

After some fiddling around I found out that it would be easier for me to use this

@media (min-width: 701px) and (max-width: 799px){//CSS HERE}

I read somewhere that it is better to do for resolutions rather than devices