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

我最近使用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" />`

`

这就是它的外观

应该是这样的：

---

我遇到了同样的问题，通过更改视口解决了它。 我还认为问题出在phonegap上，但实际上用于测试的设备具有不同的dpi

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

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

---

希望对我们有所帮助

目标密度dpi=中等dpi

情景

---

当ee从PhoneGap 2.2升级到3.3时，遇到了这个问题

我也有类似的问题，做了一些我认为值得分享的研究：

• 如前所述，将视口的

  目标密度dpi

  设置为

  中等dpi

  （=160dpi）。这将虚拟化

  px

  单元，例如html/css中的

  1px

  ，然后对应于320dpi设备上的2个物理像素。请注意，图像也会缩放（和模糊）
  媒体功能

  分辨率

  比

  设备像素比

  更干净，但缺少移动浏览器支持

• Javascript：根据

  window.devicePixelRatio

  和

  window.screen.width

  和

  window.screen.height

  调整按钮大小、图像等。按照Javascript进行布局被认为是一种不好的做法。当执行在

  pageload

  事件之后开始时，加载期间也可能会出现闪烁

• -webkit图像集

  和image

  src集

  可轻松为视网膜显示器提供高分辨率图像，请参阅。浏览器支持有限

   background-image: -webkit-image-set(
     url(icon1x.jpg) 1x,
     url(icon2x.jpg) 2x
   );
  

---

在此处添加此解决方案

对我来说，一些文本渲染得非常大，其他文本的大小正确。 问题在于css中字体大小使用rem值。出于某种原因，以字体大小为基值（在正文中定义）的元素被渲染得比它们应该的大

修复方法是在整个站点的包装器元素中为rem字体大小重新分配一个全局值

（my.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);
}

---

似乎移除

目标密度dpi

会带来最好的结果

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

对于Windows Phone（WP8），我找到了以下解决方案：

添加到css:@-ms视口{width:device width；}

添加到html：

添加到修补程序IE 10：

（功能（）{ 如果document.documentElement.style&&navigator.userAgent.match（/IEMobile/10.0/）中的（“-ms user select”）{ var msViewportStyle=document.createElement（“样式”）； msViewportStyle.appendChild( createTextNode（“@-ms viewport{width:auto！important}”） ); document.getElementsByTagName（“head”）[0].appendChild（msViewportStyle）； } })();

---

更新答案：适用于Android

问题是在Android设备上有此可访问设置，您可以尝试更改字体大小（在Android设置上搜索字体大小），然后再次运行应用程序

因此，应用程序上的字体将随着您的设置而更改

---

这是科尔多瓦的一个解决方案 使用：禁用首选文本缩放

在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);
   }
}

---

这是做这件事的方法。黑莓也不会出现任何问题。非常有帮助，令人惊讶的是，

medium dpi

比

device dpi

工作得更好。我在android和BB版本中遇到了这个问题。谢谢你，我的朋友是个救生员。拥抱、亲吻等。。。客户会议前的最后一分钟修复+100谢谢，本页可能也会对Android手机在中密度、低密度和高密度方面的应用有所帮助。我还没有测试它是否有效，但很高兴知道这应该标记为正确答案！当视口将答案中提到的属性标记为正确时，我在少数设备上遇到了模糊问题。

$ cordova plugin add https://github.com/phonegap/phonegap-mobile-accessibility.git

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
   if (window.MobileAccessibility) {
      window.MobileAccessibility.usePreferredTextZoom(false);
   }
}