根据设备方向更改网格

Question

我正在尝试根据屏幕大小更改div的大小。 如果手机正在铺设，则会改变div的大小。

示例：

阻止是默认值：在768x1280屏幕分辨率下，330px宽度和250px高。

因素是：

width: 330px; factor x 2,18
height: 250px; factor x 5,12

当我将手机更换为铺设时，尺寸应为：

width: 587px 
height: 150px

首先不起作用，有人可以告诉我为什么不呢？

JS：

var devicewidth = $( window ).width();
var deviceheight = $( window ).height();
var mbwsize = devicewidth / 2.18;
var mbhsize = deviceheight / 5.12;
var mbisize = mbhsize / 1.25;
$('#mainmenublok').css('width', mbwsize+'px');
$('#mainmenublok').css('height', mbhsize+'px');
$('#mainmenublok').css('background-size', mbisize+'px'+mbisize+'px');

不要收到错误，只是将内容保留在中间720px width (768 - offset)

我已经改变了主要的div：

$('#maintable').css('width', devicewidth+'px');

会尝试将窗口更改为文档，但有人可以看一下吗？

使用文档也不会改变。 如果你在调试时查看图片，计算是正确的。

我也在一个函数中尝试过但是没有用。

添加了一张图片来解释会发生什么

解释：

debug：

Answer 1

您可以使用mediaqueries或device.js？

Answer 2

基于作者在评论中提供的HTML

<div onclick="bb.pushScreen('timeline.html', 'timeline');"class="mainmenublok" id="blocktimeline" style="background-image:url(ico/timeline.png); background-size:200px 200px; background-repeat: no-repeat; background-position:center;"> 
   <img id="pictimeline" src="ico/bbaction.png" width="50" height="50" style="display:none;"> 
</div>

以及如上所示使用的js，我建议使用$('.mainmenublok').css('width', mbwsize+'px');代替$('#mainmenublok').css('width', mbwsize+'px');。点用于表示CSS中的类，因为主题标签用于表示ID。

Answer 3

你试图通过脚本实现的方式......没关系，但是在某些浏览器中它可能会给你错误...更好的你尝试使用任何像twitter bootstrap这样的css框架它不是很大......您的网站将根据您的设备响应....