screen.width并在不同的API /设备screen.height不同的价值观 [英] screen.width and screen.height different values in different APIs/devices

问题描述

编辑：也恰好与$（'身体'）宽（）和window.outerWidth

also happens with $('body').width() and window.outerWidth

API 2.3.3 HVGA

API 2.3.3 HVGA

在与旋转装置输出同一画面后宽（320）

Before and after rotating device outputs same screen width (320)

API 3.0 WXGA

API 3.0 WXGA

宽度和高度切换，例如每次旋转

Width and height toggle each rotation for example

与屏幕宽度开始：1280 screenheight：800
我旋转90
目前拥有屏幕宽度：800 screenheight：1280

starts with screenWidth:1280 screenheight: 800 I rotate 90 now has screenWidth:800 screenheight: 1280

所以，如果我想就一定旋转变化怎么办
根据尺寸和要针对所有API？我需要一个值，它是为所有设备相同的。

so what do I do if I want to make certain changes on rotations according to dimensions and want to target all APIs? I need a value which is the same for all devices.

编辑：对于某些事情，我需要的像素值，而不是百分比。这就是为什么我使用Javascript根据屏幕宽度来计算的大小。这工作，因为屏幕宽度也像素值，我可以让事情比例。但是，如果有时screen.width给我当前的宽度，和其他人没有，我不能用它......

For certain things I need pixel values, not percentages. That's why I'm using Javascript to calculate size based on screen width. This would work, since screen width is also pixel values and I can keep things proportional. But if sometimes screen.width gives me the current width, and others not, I can't use it...

- >的事情是，我开始与使用绝对布局和需要的一切像素值的滑块工作。我不想重新实现滑块，所以我决定来动态计算图像的大小和使用屏幕宽度的整个布局。和初始化这些值滑块。

-> The thing is I started working with a slider which uses absolute layout and needs pixel values for everything. I don't want to reimplement the slider, so I decided to calculate dynamically the size of the images and the whole layout using screen width. And initialize the slider with these values.

更新

看这里是一个类似的方法来什么，我试图做的：

Look here is a similar approach to what I'm trying to do:

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

2011年6月18日入境
一个屏幕分辨率达到了统治他们

Entry of June 18, 2011 "One Screen Resolution to Rule Them All"

我也试图与正是例如，复制我的code粘贴。但它也不行。 window.outerWidth具有与我描述了screen.width同样的问题（以及JQuery的$（'身体'）。宽度（））。它的工作原理，只要该装置不转动 - 它初始化好。但在第一次旋转，这取决于该装置的，我得到的问题。在某些如期工作，在别人互换的价值观，让我得到了肖像模式和短横向宽度大，在别人给固定的宽度和高度所有的时间，在别人不旋转所有.. ..

I tried also with exactly that example, copy pasting it in my code. But it doesn't work either. window.outerWidth has the same problems as I'm describing for screen.width (as well as JQuery $('body').width()). It works as long as the device isn't rotated - it initializes well. But at the first rotation, depending of the device, I get problems. In some it works as expected, in others it interchanges the values, so that I get large width in portrait mode and short in landscape, in others it gives fixed width and height all time, in others it doesn't rotate at all....

推荐答案

无独有偶我发现这个作品：

Coincidentally I found that this works:

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

这总是被调用，并传递正确的宽度。至于我记得它也适用于screen.width

This is always called and passes correct width. As far as I remember it also works with screen.width

在updateScaling我计算scalingFactor和调整我的元素。

In updateScaling I calculate a scalingFactor and adjust my elements.

我尝试了响应CSS，媒体查询等，但在某些时候它没有任何意义了，因为我反正根据当前幻灯片和新宽度重新计算滑块UL的保证金 - 和其他的东西哪些需要脚本。所以我做了一切剧本

I tried out responsive CSS, media queries and so on, but at some point it didn't make sense anymore, because I have anyways to recalculate the margin of slider's UL based on current slide and new width - and other stuff which needs script. So I made everything with script.

我删除window.onorientationchange。

I removed window.onorientationchange.

这篇关于screen.width并在不同的API /设备screen.height不同的价值观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！