javascript - 根据设备方向更改网格

Question

我正在尝试根据屏幕大小更改 div 的大小。如果手机正在放置，它会更改 div 的大小。

例子:

block 是默认值:在 768x1280 屏幕分辨率下，宽度为 330 像素，高度为 250 像素。

因素是:

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 宽度(768 - 偏移量)

我已经在这里更改了主 div:

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

将尝试将窗口更改为文档，但有人可以看看这个吗？

对于文档，它也不会改变。调试时看图，计算正确。

我也在函数中尝试过，但没有用。

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

解释:

调试:

Answer 1

基于作者在评论中提供的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('宽度', mbwsize+'px');.点用于指示 CSS 中的类，因为井号标签用于指示 ID。