Question

我想根据屏幕尺寸计算某些元素（img，ul，div等）的尺寸。我不能使用百分比值。我需要像素值。我也不想使用媒体查询和每种分辨率或屏幕尺寸的新图像对所有内容进行“硬编码”。

我考虑使用屏幕尺寸来制作它。我只需要宽度计算。所以我添加了我的图像的初始宽度和它们之间的一些初始空间 - ＆gt;总宽度，然后我使用：screenwidth / totalwidth

获得比例因子

现在我缩放所有图像以及这个因素之间的空间。

这是一个非常简单的布局，只有几个图像和HTML元素。所以这种缩放不应该是昂贵的。

如果设备为屏幕提供可靠的宽度测量，它将起作用。但是根据设备，我得到了这个值的不同含义。我正在使用screen.width

在某些情况下，screen.width是当前宽度的 - 在肖像中它是一个很小的值，在横向上是一个很大的值。但在其他方面，宽度始终相同 - 定义为设备宽度的值。

那么如何根据旋转的一致方式根据当前屏幕宽度来缩放布局，并且没有CSS％值？这是一种可接受的布局缩放方式还是不做任何事情？

编辑：在尝试Jasper的解决方案后，我必须添加更多细节。图像用于滑块。滑块基本上是UL，每个LI包含一个浮动图像：左 - 所以所有图像都是一个接一个地水平附加。溢出隐藏和填充只有当前幻灯片可见。现在，UL的官方宽度是所有包含的LI的宽度的总和。这意味着，至少在我目前的知识状态下，我不能使用百分比大小的LI元素，因为如果我这样做，这将是UL总宽度的％，这是非常大的，我以巨大的LI元素/图像结束。

是否有任何可靠的方法来获取所有设备的当前屏幕宽度？我已经有了工作代码，我只需要屏幕宽度的值是正确的。

新更新

这里看起来与我正在尝试的方法类似：

http://ryangillespie.com/phonegap.php#/phonegap.php？

2011年6月18日进入“统一所有人的一个屏幕决议”

我也尝试了这个例子，在我的代码中复制粘贴它。但它也不起作用。 window.outerWidth和我为screen.width描述的问题一样（以及JQuery $（'body'）。width（））。只要设备没有旋转，它就可以正常工作 - 它可以很好地初始化。但是在第一次旋转时，根据设备的不同，我会遇到问题。在某些情况下，它按预期工作，在其他情况下，它会交换值，因此我在纵向模式下获得较大的宽度，在横向上较短，在其他情况下，它始终提供固定的宽度和高度，而在其他情况下，它根本不会旋转。 ..

Answer 1

这很可能仅通过CSS实现（通常对性能有益）：

img {
    width  : 100%;
    height : auto;
}

这将保留所有图像的宽高比，但将其重新调整为100%宽度。现在，宽度是根据图像的父元素宽度设置的。如果您使用的是jQuery Mobile，那么data-role="content"元素会有15px填充，因此要删除它，您只需将一个容器添加到删除填充的图像元素中：

HTML -

    <div class="remove-page-margins">
        <img src="http://chachatelier.fr/programmation/images/mozodojo-mosaic-image.jpg" />
    </div>

CSS -

.remove-page-margins {
    margin : 0 -15px;
}

而且walaa，你有没有代码或开销的响应式图像。

以下是使用容器而不使用容器的演示：http://jsfiddle.net/EVF4w/

Answer 2

巧合的是，我发现这有效：

$(window).resize(function() {
    updateScaling($('body').width());
});

始终调用此方法并传递正确的宽度。据我所知，它也适用于screen.width

在updateScaling中，我计算一个scalingFactor并调整我的元素。

我尝试了响应式CSS，媒体查询等等，但在某些时候它没有任何意义，因为我无论如何都要根据当前幻灯片和新的宽度重新计算滑块UL的余量 - 以及其他的东西需要脚本。所以我用脚本制作了一切。

我删除了window.onorientationchange。

Javascript mobile - 根据屏幕尺寸计算元素尺寸（以像素为单位）

2 个答案: