Different resolutions for the same media query on the same website on the same device?

Question

I have a problem with automatically changing resolution on Blackberry Playbook 7" and Blackberry Q10 (720 x 720) on some pages on a website I'm currently working on. The problem is illustrated on screenshot (little bit of explanation: on pages with Nivo slider included, everything is smaller than on other pages of the same website). Screenshots are taken on BB Playbook tablet.

that's the media query for vertical display:

@media screen and (orientation: portrait)

On BB Q10 even stranger thing happens, because when page with Nivo slider is being displayed, the device takes different media query than it should. BB Q10 is 720 x 720 px screen resolution, so it should go for a media query:

@media screen and (min-width: 530px) and (max-width: 860px) and (orientation: landscape)

but pages with Nivo Slider are in fact being displayed with media query:

@media screen and (min-width: 861px) and (max-width: 1120px) and (orientation: landscape)

Am I doing something wrong or is it just a device?

screenshot

website

Answer 1

In your site, it looks like you're missing the viewport meta tag in the head.

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

You can find a good discussion on it on the Mozilla Developer Network. There's also a fairly exhaustive explanation at quirksmode.I'm guessing that missing tag is what's causing the difference.