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

Question

我正在尝试根据屏幕宽度限制 Grid 列的数量（使用 jQuery Mobile - http://demos.jquerymobile.com/1.4.2/grids/）。这适用于无法扩展的全屏应用，因此不需要响应式设计。

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

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

添加和删除视口元标记对 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 正在渲染一半的像素，以便让设备的显卡自己渲染清晰度，而不是在设备移动时不断地从使用屏幕宽度来确定设备类型的网站获取桌面网站。

Answer 2

到目前为止，我知道列号必须声明为硬编码。所以必须动态创建来控制列数。

width=$(window).width();

或

width=$( document ).width();

和

if(width<=320)
{
    myhtml='<div class="ui-grid-a" class="mymenu">"';
    myhtml=myhtml+'<div class="ui-block-a">Hello</div>';
    myhtml=myhtml+'<div class="ui-block-b">Hello</div>';
    myhtml=myhtml+'</div>';

}
else if(width>320 && width<720)
{
    myhtml='<div class="ui-grid-b" class="mymenu">"';
    myhtml=myhtml+'<div class="ui-block-a">Hello</div>';
    myhtml=myhtml+'<div class="ui-block-b">Hello</div>';
    myhtml=myhtml+'<div class="ui-block-c">Hello</div>';
    myhtml=myhtml+'</div>';

}

$('#menu_div').html(myhtml);