Question

我试图根据屏幕宽度限制Grid列的数量（使用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上，原生浏览器将屏幕宽度报告为720px，Chrome浏览器将其报告为320px。

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

meta name =＆＃34; viewport＆＃34; content =＆＃34; user-scalable = no，initial-scale = 1.0，maximum-scale = 1.0，minimum-scale = 1.0＆＃34;

也没有用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实现这个目标？

感谢。

[编辑]

不太确定这是我构建的应用程序的问题。在谷歌Chrome浏览器中，受影响的Android版本看到的是4列而不是5列，这绝对是优雅的失败＆＃39;。

Answer 1

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

看看这是否修复了它。银河系渲染了一半的像素，以便让设备显卡本身呈现清晰度，而不是不断地从使用屏幕宽度的网站获取桌面网站，以确定设备移动时的设备类型。

Answer 2

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

width=$(window).width();

OR

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);

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

2 个答案: