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" />` 

这是它的样子
这发生在一个特定的手机(三星Galaxy)

这是它应该看起来如此:
这是它在htc野火中的样子

我有同样的问题,并解决了它改变视口。 我也认为这个问题是手机的问题,但是用于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-densitydpimedium-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 */ } 

    媒体functionresolutiondevice-pixel-ratio更清晰,但缺less移动浏览器支持。

  • Javascript:调整button大小,图像等基于window.devicePixelRatiowindow.screen.widthwindow.screen.height 。 根据Javascript的布局被认为是不好的做法。 在pageload载入事件之后执行开始,加载期间也可能导致闪烁。

  • -webkit-image-set和image src-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字体大小 ),并再次运行你的应用程序。

所以你的应用程序的字体将会改变为你的设置

Accessibilly字体大小


所以这里是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

  1. 添加到CSS:@ -ms-viewport {width:device-width; }
  2. 添加到HTML: <meta name="viewport" content="width=device-width, initial-scale=1" />
  3. 添加到补丁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); }