4

我正在使用 phonegap 和 jQuery mobile 开发 Android 应用程序。在浏览器中，页面看起来不错，但是当我在设备上运行应用程序（=在 web 视图中）时，页面看起来很便宜而且有点……关闭。几乎就像页面缩放了 101% 或类似的东西。有没有其他人遇到过这个问题？知道如何解决吗？

4

6 回答 6

5

您是否尝试过将target-densitydpi=device-dpi值添加到页面中的视口元标记，</head>如下所示：

<head>    
    <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi" />
    ...
</head>

这应该够了吧; 我希望它有帮助！

于 2012-06-04T20:35:44.147 回答
2

实际上，没有任何字体大小副作用的真正解决方法是解决 CSS 文本阴影，如下所示。

* {
text-shadow:0 0 0 transparent;
text-shadow:none;
}

这可以确保您的字体没有阴影，这就是文本看起来模糊的原因。如果仔细观察，您会发现文字实际上并不模糊，而是具有相同颜色的阴影。

于 2014-03-09T21:20:13.447 回答
1

在jQuery 论坛上也有人建议添加user-scalable=0到不断增加的元标记中。所以它最终看起来类似于：

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

这个修复对我有用。尽管 jQuery 论坛帖子也建议最终的解决方法可能是包含一些 Android 特定的 css：

- if is_android?
  %link{:rel => 'stylesheet', :type => 'text/css', :href => '/stylesheets/mobile/android.css'}/
于 2013-02-04T19:59:07.323 回答
0

在移动设备上测试时我也遇到了同样的问题。但请参阅此链接：

CSS“px”单位可能与设备的实际像素不同，因为浏览器会将图像和字体“缩放”到比您请求的更大的尺寸。（当您说“px”时，浏览器会自然而然地假定您不是真的指“像素”，并会帮助您调整内容的大小，使其在高分辨率手机屏幕上可读。）

然后，我将我的 TARGET-DENSITYDPI 更改为“target-densitydpi=150”，它工作正常（在 NEXUS 10 上测试）。

于 2013-02-15T03:22:17.443 回答
0

Webkit 使用“css 像素”，然后将其重新计算为物理设备分辨率——也许这就是这里的问题。

如果你有一个典型的 4 英寸手机，屏幕为 480x800，css 像素可能是 320x533，CSS 像素比是 1.5。

在这种情况下，一张 32 x 32 像素的图像至少需要 48 x 48 像素才能看起来又好又锐利。因为某些设备的像素比为 2（iPhone 4/5），我通常使用 2 倍大的图像，它们看起来非常好，几乎和 svg 图像一样好（并且在较旧的浏览器上宽度没有问题）。

这样做，您需要记住定义图像大小

background:url('myimage64.png'); background-size:32px 32px;

或者

<img src='myimage64.png' width='32' height='32'>
于 2014-07-23T13:47:00.410 回答
0

尝试将空白字符“”放在您的图像的同一个容器中，我不知道确切但它对我有用。

于 2014-01-06T09:50:42.757 回答