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

Phonegap Application text and layout too small

提问by lomas09

I recently build an android app using html, css, javascript and running them through phonegap to create the actual app. One of the problems I encountered in one phone is that the text looks too small. Also some images are a little small as well. I added a viewport meta tag but it doesnt seem to work either. Here are the meta tags:

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

This is how it looks

这是它的样子

This is how its supposed to look:

这是它的外观：

回答by MazarD

I had the same problem and solved it changing the viewport. I also thought the problem was phonegap, but it really was that the devices used for testing had different dpi.

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

My solution was to change the target-densitydpi on the viewport to:

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

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

Hope it helps

希望能帮助到你

回答by vodov

I had a similar problem and did some research I thought is worth sharing:

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

• Set the viewport's target-densitydpito medium-dpi(=160dpi), as already suggested. This virtualizes the pxunit, e.g. 1pxin html/css then corresponds to 2 physical pixels on a 320dpi device. Note that images are scaled (and blurred) as well.

  <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: Use media queries to implement conditional styling. Adapting for different screen sizes dependent on width, height, aspect or orientation is straight-forward. Different pixel densities can be handled with device-pixel-ratio(thanks to Marc Edwards for providing an example: 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 */
  }
  

  The media feature resolutionis cleaner than device-pixel-ratio, but it lacks mobile browser support.

• Javascript: Adapt button sizes, images etc. based on window.devicePixelRatioand window.screen.widthand window.screen.height. Layouting per Javascript is considered as bad practice. Also flickering might result during loading as the execution starts after the pageloadevent.

• -webkit-image-setand image src-setmake it easy to provide high-res images for retina displays, see http://www.html5rocks.com/en/mobile/high-dpi/#toc-bff. Browser support is limited.

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

• 正如已经建议的那样，将视口设置target-densitydpi为medium-dpi(=160dpi)。这将虚拟化px单元，例如1px在 html/css 中，然后对应于 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.devicePixelRatioandwindow.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
   );
  

回答by Francesco Frapporti

It appears that removing the target-densitydpialtogether brings the best results.

似乎target-densitydpi完全删除会带来最好的结果。

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

This should be more than enough to control your app's appearance in most cases.

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

回答by apachebite

target-densitydpi=medium-dpi Worked for us.

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

Scenario Faced this issue when ee upgraded from PhoneGap 2.2 to 3.3.

场景 ee 从 PhoneGap 2.2 升级到 3.3 时遇到此问题。

回答by l2aelba

Updated answer:for Android

更新答案：适用于Android

The problem is on Android devices has this Accessibillysettings, You can try to change font-size (search font sizeon android setting) and run you app again.

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

So your fonts on app will be changed as your setting

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

---

---

So here is a solution for Cordova

所以这是 Cordova 的解决方案

Use :mobile-accessibilityto disabling PreferredTextZoom

使用：禁用PreferredTextZoom的移动可访问性

Install mobile-accessibilityon your Cordova project

在您的 Cordova 项目上安装移动辅助功能

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

And JS partis something like :

而JS部分是一样的东西：

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

回答by Gerfried

For Windows Phone (WP8) I've found the following solution: https://github.com/phonegap/phonegap-app-developer/issues/92

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

1. add to css: @-ms-viewport{ width: device-width; }
2. add to html: <meta name="viewport" content="width=device-width, initial-scale=1" />

3. add to to patch IE 10:

   (function() { 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); } })();

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

3. 添加到补丁 IE 10：

   (function() { 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); } })();

回答by Alex Beauchemin

Adding this solution here

在此处添加此解决方案

For me, some text were rendering really big, others were the correct size. The problem was with the use of rem values for font-size in the css. For some reason, elements where the font-size was the base value (defined in the body) were rendered way bigger than they should.

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

The fix was to reassign a global value for the rem font-size in a wrapper element for the entire site.

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

(my .font-size(1.4) is only a mixin rendering: font-size: 1.4rem; )

（我的 .font-size(1.4) 只是一个混合渲染： font-size: 1.4rem; ）

So this

所以这

html {
  font-size: 62.5%;
}

body {
  .font-size(1.4);
}

h1 {
  .font-size(2.6);
}

Can be fixed with this

可以用这个修复

html {
  font-size: 62.5%;
}

body {
  .font-size(1.4);
}

.wrapper {
  .font-size(1.4);
}

h1 {
  .font-size(2.6);
}