Phonegap应用程序文本和布局太小
我最近build立一个使用HTML，CSS，JavaScript的Android应用程序，并通过手机运行它们来创build实际的应用程序。 我在一部手机中遇到的问题之一是文字太小。 还有一些图像也有点小。 我添加了一个视口元标记，但它似乎也没有工作。 这里是meta标签：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />` 这是它的样子 
这是它应该看起来如此： 
我有同样的问题，并解决了它改变视口。 我也认为这个问题是手机的问题，但是用于testing的设备的确有不同的dpi。
我的解决scheme是将视口上的目标densitydpi更改为：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
希望能帮助到你
我有一个类似的问题，并做了一些我认为值得分享的研究：
-
如前所述，将视口的
target-densitydpi为medium-dpi（= 160dpi）。 这使得px单元虚拟化，例如在html / css中为1px，然后对应于320dpi设备上的2个物理像素。 请注意，图像也缩放（和模糊）。<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：使用媒体查询来实现条件样式。 根据宽度，高度，方向或方向调整不同的屏幕尺寸是非常简单的。 不同的像素密度可以通过
device-pixel-ratio进行处理（感谢Marc Edwards提供的示例： https ： //gist.github.com/marcedwards/3446599 ）。@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-o-min-device-pixel-ratio: 15/10) { body { background-image: ... } /* provide high-res image */ }媒体function
resolution比device-pixel-ratio更清晰，但缺less移动浏览器支持。 -
Javascript：调整button大小，图像等基于
window.devicePixelRatio和window.screen.width和window.screen.height。 根据Javascript的布局被认为是不好的做法。 在pageload载入事件之后执行开始，加载期间也可能导致闪烁。 -
-webkit-image-set和imagesrc-set可以很容易地为视网膜显示提供高分辨率的图像，请参阅http://www.html5rocks.com/en/mobile/high-dpi/#toc-bff 。 浏览器支持是有限的。background-image: -webkit-image-set( url(icon1x.jpg) 1x, url(icon2x.jpg) 2x );
target-densitydpi = medium-dpi为我们工作。
场景当ee从PhoneGap 2.2升级到3.3时遇到了这个问题。
看来，删除target-densitydpi完全带来了最好的结果。
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
在大多数情况下，这应该足以控制您的应用程序的外观。
为Android 更新答案：
问题是在Android设备上有这个Accessibilly设置，你可以尝试改变字体大小（在Android设置上search字体大小 ），并再次运行你的应用程序。
所以你的应用程序的字体将会改变为你的设置
所以这里是Cordova的解决scheme
使用： mobile-accessibility来禁用PreferredTextZoom
在您的Cordova项目上安装移动可访问性
$ cordova plugin add https://github.com/phonegap/phonegap-mobile-accessibility.git
而JS部分是这样的：
document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { if (window.MobileAccessibility) { window.MobileAccessibility.usePreferredTextZoom(false); } }
对于Windows Phone（WP8）我find了以下解决scheme： https ： //github.com/phonegap/phonegap-app-developer/issues/92
- 添加到CSS：@ -ms-viewport {width：device-width; }
- 添加到HTML：
<meta name="viewport" content="width=device-width, initial-scale=1" /> -
添加到补丁IE 10：
（function（）{if（“document.documentElement.style && navigator.userAgent.match（/IEMobile/10.0/）”中的“-ms-user-select”）{var msViewportStyle = document.createElement（“style”）; msViewportStyle。 appendChild（document.createTextNode（“@ – ms-viewport {width：auto！important}”））; document.getElementsByTagName（“head”）[0] .appendChild（msViewportStyle）;}}）（）;
在此添加此解决scheme
对于我来说，一些文字渲染真的很大，其他文字是正确的大小。 问题是在CSS中使用rem值的字体大小。 出于某种原因，字体大小是基本值（在本体中定义）的元素被渲染得比他们应该的大。
解决的办法是为整个站点的包装器元素重新分配rem字体大小的全局值。
（我的。字体大小（1.4）只是一个混合渲染：font-size：1.4rem;）
所以这
html { font-size: 62.5%; } body { .font-size(1.4); } h1 { .font-size(2.6); }
可以用这个修复
html { font-size: 62.5%; } body { .font-size(1.4); } .wrapper { .font-size(1.4); } h1 { .font-size(2.6); }
