Phonegap在iPad和iPhone之間不能正確縮放

我使用Phonegap 0.9.6爲iPad開發了一個應用程序。似乎工作正常。Phonegap在iPad和iPhone之間不能正確縮放

該應用程序的主要元素是768像素寬，因此縮放並不是一個問題。

現在我正在試驗在iPhone上運行相同的東西。

我在我的HTML的頂部的「頭」一節meta標籤：

<meta name="viewport" content="user-scalable=no, width=device-width">

看來工作在iPhone瀏覽器罰款：我可以在瀏覽器指向我的本地運行的服務器，頁面得到適當縮放，以適應iPhone屏幕。

如果我製作了一個「主屏幕」版本的頁面，使它更像是一個WebApp（仍然沒有使用PhoneGap），我仍然可以縮放，儘管現在它有點關閉：圖像有點過於寬泛，很小剝去右側捲起屏幕外。

但是當我嘗試的東西在PhoneGap的我越來越不結垢可言。該頁面始終顯示了在正常的分辨率，所以我看到的只是它的前1/4。

我已經嘗試了以下所有內容： *將摘要 - >設備從iPad更改爲XCode目標設置中的Universal。 *在'info'標籤下使用'enable display scaling'小部件這個構建的計劃中的'運行'項目。 *我可以想到meta的'viewport'標籤的每一個技巧變化：設置最小/最大比例，設置初始比例，設置寬度爲固定數字等。

對於最後一項，我可以看到調整I反映在iPhone上的瀏覽器（以及HomeScreen版本）上，但PhoneGap從不加分：我總是得到相同的右上角。我似乎無法完成此舉。

來源

2011-09-28 Douglas Banks

適合iPhone屏幕的合適方法不是縮放縮小整個頁面，而是使用可擴展的html結構和樣式來顯示您的應用，例如，使用100%而不是768px。你應該總是避免縮放頁面。插入此行頭標記：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

這是更好地寫相同的CSS對於iPhone和iPad，但如果你真的想爲他們應用不同的樣式每個，您可以使用媒體查詢，例如，iPad的特異性的風格是這樣的：

<link rel="stylesheet" media="screen (max-device-width: 1024px)" href="ipad.css" />

您還需要指定不同的CSS文件的低分辨率屏幕，Retina屏幕。仍然使用媒體查詢。

<link href="static/iphone.css" rel="stylesheet" type="text/css"> 
<link rel="stylesheet" type="text/css" href="static/retina.css" 
    media="screen and (-webkit-device-pixel-ratio: 2)" />

來源

2012-02-02 14:28:11 su27

你應該能夠把你的PhoneGap.plist文件中的以下控制縮放槽HTML：

EnableViewportScale：YES

來源

2012-04-17 01:57:15 micky2be

Phonegap在iPad和iPhone之間不能正確縮放

回答

相關問題