在phonegap中到处都是奇怪的像素

时间:2014-07-11 07:44:24

标签: webview mobile-website mobile-webkit

我正在开发一个跨平台的应用程序,我只有一个我只有一个测试设备的错误:平板电脑HP Slate8 Pro(型号7600es)。

问题在于,在显示器的许多地方,都有奇怪的像素,就像它没有得到正确的抗锯齿一样。以下是我的意思截图:

Pixel bug

第一个很清楚。它是线性图的一部分,这条绿线恰好变得奇怪。圆圈相同。
第二个更难看,但中间有一条灰线,也有点破,8和第二零不对 最后,最后一个是一些错误的文本。

我的视口元标记是:

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

我的cordova版本是3.4.1-0.1.0

但真正奇怪的是,我使用cordova制作的最后一个应用程序在同一个平板电脑中没有此错误。这两者之间的主要区别在于旧版本是使用AngularJS和Bootstrap制作的,而这一个是用Ionic制作的(也适用于AngularJS)。我真的不知道这是否相关。

此外,直接在同一设备的Chrome浏览器中测试此应用,该错误不会显示。然后我认为只有在使用cordova的WebView时才会发生。

任何人都有任何暗示吗?

=======编辑========

我刚刚发现,在视口元标记中放置target-densitydpi=device-dpi会通过禁止密度调整来修补此问题,从而使所有内容看起来都比使应用程序几乎无法使用时要小。

因此,看起来WebView正在缩放所有网页以匹配mdpi维度,但是在调整大小的像素时会出现抗锯齿现象。

我可能会向ion发布一个问题。

0 个答案:

没有答案