screen.width 和 screen.height 在不同 API/设备中的不同值 [英] screen.width and screen.height different values in different APIs/devices
问题描述
也发生在 $('body').width() 和 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
以 screenWidth:1280 开头 screenheight: 800我旋转90现在有 screenWidth: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"
我也试过那个例子，将它复制粘贴到我的代码中.但它也不起作用.window.outerWidth 与我为 screen.width(以及 JQuery $('body').width())描述的问题相同.只要设备不旋转，它就可以工作 - 它可以很好地初始化.但是在第一次旋转时，根据设备的不同，我遇到了问题.在某些情况下它按预期工作，在其他情况下它会交换值，因此我在纵向模式下获得较大的宽度而在横向模式下获得较短的宽度，在其他情况下它始终提供固定的宽度和高度，在其他情况下它根本不旋转....
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....
推荐答案
碰巧我发现这有效:
$(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 和 screen.height 在不同 API/设备中的不同值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
