Phonegap应用程序文本和布局太小

Question

我最近使用html，css，javascript构建了一个Android应用程序，并通过phonegap运行它们来创建实际的应用程序。我在一部手机中遇到的一个问题是文字看起来太小了。还有一些图像也有点小。我添加了一个视口元标记，但它似乎也没有工作。以下是元标记：

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

这就是它的外观

这是它应该看的样子：

Answer 1

我遇到了同样的问题并解决了改变视口的问题。 我还认为问题是电话差距，但实际上用于测试的设备有不同的dpi。

我的解决方案是将视口上的target-densitydpi更改为：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />

希望有所帮助

Answer 2

我遇到了类似的问题并做了一些我认为值得分享的研究：

• 按照建议，将视口的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 */
  }
  

  媒体功能resolution比device-pixel-ratio更清晰，但它缺乏移动浏览器支持。

• Javascript：根据window.devicePixelRatio和window.screen.width以及window.screen.height调整按钮大小，图片等。按Javascript进行布局被认为是不好的做法。在pageload事件之后执行开始时，加载期间也可能会出现闪烁。

• -webkit-image-set和图片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
   );
  

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

在大多数情况下，这应该足以控制应用程序的外观。

Answer 4

target-densitydpi = medium-dpi为我们工作。

情景 当ee从PhoneGap 2.2升级到3.3时，面临这个问题。

Answer 5

Android

的更新回答

问题在于Android设备上有 Accessibilly 设置，您可以尝试更改字体大小（在Android设置上搜索字体大小 并再次运行你的应用程序。

因此，应用中的字体将更改为您的设置

所以这是Cordova的解决方案

使用 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);
   }
}

Answer 6

对于Windows Phone（WP8），我找到了以下解决方案： 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（＆＃34; -ms-user-select＆＃34; in document.documentElement.style＆amp;＆amp; navigator.userAgent.match（/IEMobile/10.0/））{     var msViewportStyle = document.createElement（＆＃34; style＆＃34;）;     msViewportStyle.appendChild（         document.createTextNode（＆＃34; @ - MS-视口：＆＃34 {宽自重要！};）     ）;     document.getElementsByTagName（＆＃34;头＆＃34;）[0] .appendChild（msViewportStyle）; } }）（）;

Answer 7

在此处添加此解决方案

对我来说，有些文字渲染得很大，有些则是正确的尺寸。 问题是在css中使用font-size的rem值。出于某种原因，font-size是基本值（在正文中定义）的元素被渲染得比它们应该的大。

修复方法是在整个网站的包装元素中重新分配rem font-size的全局值。

（我的.font-size（1.4）只是一个mixin渲染：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);
}