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

【问题标题】：Phonegap Application text and layout too smallPhonegap 应用程序文本和布局太小
【发布时间】：2013-02-18 03:36:42
【问题描述】：

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

这就是它的样子

这就是它的外观：

【问题讨论】：

标签： javascript html css jquery-mobile cordova

【解决方案1】：

我遇到了同样的问题，并通过更改视口解决了它。我还以为问题出在phonegap上，但确实是用于测试的设备具有不同的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" />

希望对你有帮助

【讨论】：

这就是这样做的方法。也不会在黑莓上造成任何问题。
非常有帮助，令人惊讶的是medium-dpi 比device-dpi 效果更好
我在我的 android 和 BB 版本中遇到了这个问题。谢谢你
你我的朋友是救命稻草。拥抱、亲吻等……客户会议前的最后一刻修复。 +100
developer.android.com/reference/android/webkit/WebView.html 此页面还可能有助于了解 Android 手机在中、低和高密度方面的表现，

【解决方案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
 );
```

【讨论】：

【解决方案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" />

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

【讨论】：

这应该被标记为正确答案！当视口将答案中提到的属性标记为正确时，我在少数设备上面临模糊问题。

【解决方案4】：

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

场景 ee 从 PhoneGap 2.2 升级到 3.3 时遇到了这个问题。

【讨论】：

【解决方案5】：

更新答案： Android

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

因此您在应用上的字体将根据您的设置进行更改

所以这里有一个 Cordova 的解决方案

使用： mobile-accessibility 禁用PreferredTextZoom

在您的 Cordova 项目中安装 mobile-accessibility

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

【讨论】：

【解决方案6】：

对于 Windows Phone (WP8)，我找到了以下解决方案： https://github.com/phonegap/phonegap-app-developer/issues/92

添加到 css：@-ms-viewport{ 宽度：设备宽度； }
添加到 html: <meta name="viewport" content="width=device-width, initial-scale=1" />
添加到补丁 IE 10：

(函数() { if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile/10.0/)) { var msViewportStyle = document.createElement("style"); msViewportStyle.appendChild( document.createTextNode("@-ms-viewport{width:auto!important}") ); document.getElementsByTagName("head")[0].appendChild(msViewportStyle); } })();

【讨论】：

谢谢。还没有测试它是否有效，但很高兴知道

【解决方案7】：

在此处添加此解决方案

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

解决方法是在整个网站的包装元素中为 rem 字体大小重新分配一个全局值。

(我的.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);
}

【讨论】：