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单元虚拟化,例如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.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" />

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