想縮小科爾多瓦應用顯示輸出

我創建了一個網絡應用程序，目標是Nexus 4手機的目標，旨在用於橫向。使用chrome看起來很好。但是當我使用HTML/CSS創建Cordova應用程序時，顯示器對於手機而言太大了。我嘗試了許多人提出的許多建議，但無濟於事。作爲一個例子，如果我有以下的div定義：想縮小科爾多瓦應用顯示輸出

#content { 
    border:    thin ; 
    border-style:  solid ; 
    width:    960px ; 
    height:    475px ; 
}

和作爲Web應用內，邊界在的Nexus 4使用鉻的顯示非常適合。但是，我必須將960px縮小到570px左右，以便在通過cordova安裝應用程序時使其適合它。我正在爲#content div內的所有div製作「固定」位置。這款應用只能使用1個目標設備 - 我不在乎任何其他設備。（是的，我真的想這樣做）。我不想滾動。

我嘗試設置目標densitydpi =中等DPI」在Phonegap/Cordova App Shrink too small on high resolution device like Samsung Galaxy S4 和Phonegap Application text and layout too small

我試過設置初始規模= 1.0一樣，很多人提出建議。我已經嘗試1.5和2.0，這使得它甚至更大，但0.5不會使它更小。我嘗試添加 偏好NAME =「EnableViewportScale」值=「真」的建議 我config.xml中通過PhoneGap: Scaling down a webpage with viewport

雖然我已經嘗試了多種組合，我的基本視的定義是：

<meta name="viewport" content="user-scalable=no, 
     initial-scale=1, maximum-scale=1, minimum-scale=1, 
     width=device-width, height=device-height, 
     target-densitydpi=medium-dpi" />

什麼都沒有爲我工作。

我不知道這些東西是如何工作的，而且我對前端和移動應用技術的經驗很少。我發現廣告中的硬件設備解決方案與我在網絡應用中看到的內容之間沒有任何關係，以及我在本地應用中看到的內容。我不知道爲什麼他們會在同一個CSS上使用不同的設備。

任何建議和/或指針將不勝感激。

來源

2014-12-30 RJ White

我在Android 4.1 viewport scaling (setInitialScale, meta initial-scale not working) 找到了一個解決方案（雖然缺少一個開放的大括號）。

使用：

function customScaleThisScreen() { 
    var contentWidth = document.body.scrollWidth, 
     windowWidth = window.innerWidth, 
     newScale = windowWidth/contentWidth; 
    document.body.style.zoom = newScale; 
}

和我的視窗設置爲：我的Nexus 4屏幕內

<meta name="viewport" content="user-scalable=no, 
     initial-scale=0.6, maximum-scale=0.6, minimum-scale=0.6, 
     width=device-width, height=device-height, 
     target-densitydpi=medium-dpi" />

現在適合。儘管高度（在橫向模式下）比我想要的要少，但整個顯示屏都顯示出來了。它佔用了我可以生活的大約90％的可用身高。

我還發現，設置：

<preference name="EnablEnableViewportScale" value="false" />

config.xml中什麼都不做 - 我是否將其設置爲true或false。之前，無論EnableViewportScale設置爲什麼，我都可以向上擴展1.0（例如2和4），但不能低於1.0。但上面的代碼解決了這個問題。我正在運行Android 4.4.4

來源

2014-12-31 02:51:00

想縮小科爾多瓦應用顯示輸出

回答

相關問題