同一设备上同一网站上同一媒体查询的不同分辨率？

Question

我在我正在处理的网站上的某些页面上自动更改Blackberry Playbook 7“和Blackberry Q10（720 x 720）的分辨率时遇到问题。问题在屏幕截图中说明（一点点解释：on包含Nivo滑块的页面，一切都比同一网站的其他页面小。）截图是在BB Playbook平板电脑上拍摄的。

这是垂直显示的媒体查询：

@media screen and (orientation: portrait)

在BB Q10上发生更奇怪的事情，因为当显示带有Nivo滑块的页面时，设备会采用不同的媒体查询。 BB Q10的屏幕分辨率为720 x 720像素，因此它应该用于媒体查询：

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

但是Nivo Slider的页面实际上正在显示媒体查询：

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

我做错了什么或只是一个设备？

screenshot

website

Answer 1

在您的网站中，您似乎错过了头部中的视口元标记。

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

你可以找到一个很好的讨论on the Mozilla Developer Network。在quirksmode还有一个相当详尽的解释。我猜测丢失的标签是造成差异的原因。