Search code examples
htmlcssipadmedia-queries

@media query doesn't work on ipad portrait (already searched all questions)

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?

Solution

  • 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