android - 设置屏幕宽度上的网格列数 - jQuery Mobile？

Question

我试图根据屏幕宽度限制网格列的数量(使用 jQuery Mobile - http://demos.jquerymobile.com/1.4.2/grids/)。这适用于不可扩展的全屏应用，因此不需要响应式设计。

举个例子，如果应用程序加载到 iPhone 3GS (320w x 480h) 上，则希望将其限制为仅 2 列。如果加载到 Samsung S3 (720w x 1280h)，限制为 4 列。等等

考虑过使用 JS document.width 或 width.screen.width 属性，但发现它们太不一致了。在运行 Android 的三星 Galaxy S3 上， native 浏览器将屏幕宽度报告为 720 像素，而 Chrome 浏览器将其报告为 320 像素。

添加和删除视口(viewport)元标记对 JS 的宽度值没有影响。

meta name="viewport"content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

也没有使用 setTimeout 延迟查找。

我使用的 jQuery 版本:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> 

有没有办法用 CSS 实现这一点？

谢谢。

[编辑]

不太确定这是我正在构建的应用程序的问题。在受影响的 Android 版本的 Google Chrome 中看到 4 列而不是 5 列肯定是“正常失败”。

Answer 1

<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">

看看这是否解决了问题。 galaxy 正在渲染一半的像素，以允许设备显卡自行渲染清晰度，而不是在设备移动时不断从使用屏幕宽度确定设备类型的网站获取桌面网站。