screen.width和screen.height在不同的API /設備中的不同值

Question

編輯：也發生與$（'body'）。width（）和window.outerWidth

API 2.3.3 HVGA

旋轉設備之前和之后輸出相同的屏幕寬度（320）

API 3.0 WXGA

例如，寬度和高度切換每個旋轉

以screenWidth：1280屏幕高度開始：800我旋轉90現在有screenWidth：800屏幕高度：1280

因此，如果我想根據尺寸對旋轉進行某些更改並想定位所有API，該怎么辦？ 我需要一個對於所有設備都相同的值。

編輯：對於某些事情，我需要像素值，而不是百分比。 這就是為什么我使用Javascript根據屏幕寬度計算尺寸的原因。 這會起作用，因為屏幕寬度也是像素值，我可以保持比例。 但是，如果有時screen.width給我當前的寬度，而其他卻沒有，我就不能使用它。

->問題是我開始使用一個使用絕對布局並且需要所有像素值的滑塊。 我不想重新實現滑塊，所以我決定使用屏幕寬度動態計算圖像的大小和整個布局。 並使用這些值初始化滑塊。

更新

看看這里是與我嘗試執行的操作類似的方法：

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

2011年6月18日參賽作品“一屏解決所有問題”

我也嘗試使用該示例，將其復制粘貼到我的代碼中。 但這也不起作用。 window.outerWidth具有與我為screen.width描述的相同的問題（以及JQuery $（'body'）。width（））。 只要設備不旋轉，它就可以工作-初始化良好。 但是在第一次旋轉時，我會遇到問題，具體取決於設備。 在某些情況下，它按預期工作，在其他情況下，它交換值，以便在縱向模式下獲得較大的寬度，在橫向模式下獲得較短的寬度，在其他情況下，其始終提供固定的寬度和高度，而在其他情況下，則完全不旋轉。 ..

Answer 1

響應式網頁設計技術。 我在自己的博客上給出了一個超簡短的示例以及一本推薦書。

http://simonmacdonald.blogspot.com/2012/01/on-eight-day-of-phonegapping-multiple.html

Answer 2

我在兩個PhoneGap應用程序中使用媒體查詢。 沒有javascript，除非出現異常情況。

例如，“基本” css可以用於寬度320和縱向，然后使用css :-)的級聯效果添加如下塊：

@media屏幕和（最大寬度：480像素）和（方向：肖像）{使內容變大}

@media all和（最小寬度：800px）{使內容更大}

通過在鏈接的CSS文件中進行類似的查詢（以及方向更改的device / os / phonegap處理），新布局會自動生成。

注意：通過閱讀Simon的博客和他建議的材料，我學到了這一切。

Answer 3

巧合的是，我發現這可行：

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

這總是被調用並傳遞正確的寬度。 據我記得，它也適用於screen.width

在updateScaling中，我計算了scalingFactor並調整了我的元素。

我嘗試了響應式CSS，媒體查詢等，但是在某些時候它不再有意義了，因為無論如何我都必須根據當前幻燈片和新寬度以及需要腳本的其他內容重新計算滑塊UL的邊距。 所以我用腳本制作了一切。

我刪除了window.onorientationchange。

Answer 4

我不知道phonegap如何為您呈現信息，但是對於本機Android應用程序，您通常會針對各種顯示密度和屏幕尺寸/寬度聲明不同的布局和圖像資源。 請參閱此頁面以獲取更多信息： http : //developer.android.com/guide/practices/screens_support.html