51

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

这是它的样子
这发生在特定手机中（三星 Galaxy）

这是它应该看起来的样子：
这就是它在 htc wildfire 中的样子

4

7 回答 7

144

我有同样的问题并解决了它改变视口。我还认为问题是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" />

希望能帮助到你

于 2013-03-21T10:49:50.840 回答
7

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

  • 如前所述，将视口设置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和 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
 );
于 2014-06-24T14:24:42.577 回答
5

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

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

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

于 2014-10-30T10:10:26.483 回答
4

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

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

于 2014-02-19T17:52:02.690 回答
1

更新答案：适用于Android

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

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

可访问字体大小

所以这是科尔多瓦的解决方案

使用： 禁用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);
   }
}
于 2017-06-08T12:51:16.197 回答
0

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

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

于 2015-10-19T06:59:42.730 回答
-2

在此处添加此解决方案

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

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

（我的 .font-size(1.4) 只是混合渲染：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);
}
于 2014-10-03T15:41:10.847 回答