响应式设计 - 不在平板电脑上显示我的平板电脑设计

Question

我有一个使用一些媒体查询构建的响应式网站：移动设备、平板电脑和桌面设备。当我在我的 7 英寸三星 galaxy tab 2 上垂直查看我的网站时，我得到移动视图，当我水平查看它时，它显示为我的桌面视图。

所以我的问题是，发生这种情况是因为设备的显示本身以及我设置断点的位置吗？或者它与错误的 meta 有关吗？或者可能完全不同？

元标记

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

媒体查询示例

@media all and (min-width: 670px)

谢谢。

Answer 1

Samsung Galaxy Tab 2 的分辨率为 1024x600 像素。因此，当平板电脑处于纵向模式时，您提供的媒体查询中设置的样式将不会应用，因为视口宽度仅为 600 像素。