Fatal编程技术网
  • jquery/
  • 使用phonegap在android上使用jQuery mobile时布局模糊/质量低下

使用phonegap在android上使用jQuery mobile时布局模糊/质量低下

jquery android mobile jquery-mobile cordova

使用phonegap在android上使用jQuery mobile时布局模糊/质量低下,jquery,android,mobile,jquery-mobile,cordova,Jquery,Android,Mobile,Jquery Mobile,Cordova,我正在使用phonegap和jQuery mobile开发一个Android应用程序。在浏览器中，页面看起来很好，但当我在设备上运行应用程序时（在网络视图中），页面看起来很便宜并且有点。。。关几乎就好像页面被放大了101%或者类似的东西。还有其他人遇到过这个问题吗？知道如何修复吗？您是否尝试过将目标密度dpi=设备dpi值添加到页面中的视口元标记中，如下所示： <head> <meta name="viewport" content="width=device-

我正在使用phonegap和jQuery mobile开发一个Android应用程序。在浏览器中，页面看起来很好，但当我在设备上运行应用程序时（在网络视图中），页面看起来很便宜并且有点。。。关几乎就好像页面被放大了101%或者类似的东西。还有其他人遇到过这个问题吗？知道如何修复吗？

您是否尝试过将
目标密度dpi=设备dpi
值添加到页面
中的视口元标记中，如下所示：

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


...
这应该会奏效；我希望有帮助

还建议在不断增加的元标记中添加
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">
在移动设备上测试时，我也有同样的问题。但请参考以下内容：

CSS“px”单元可能不同于设备的实际像素，因为 浏览器将图像和字体“缩放”到比您要求的更大的大小。 （浏览器只是自然而然地假设您不是真的指“像素” 当你说“px”并试图调整内容大小以使 可在高分辨率手机屏幕上阅读。）

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

尝试将空白字符“”放在图像的同一对符中，我不太清楚，但它对我有效。

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

* {
text-shadow:0 0 0 transparent;
text-shadow:none;
}
这样可以确保字体没有阴影，这就是文本看起来模糊的原因。如果仔细观察，您可以看到文本实际上并不模糊，但具有相同颜色的阴影。

Webkit使用“css像素”，然后将其重新计算为物理设备分辨率-可能这就是问题所在

如果您有一部典型的4英寸手机，屏幕为480x800，css像素可能为320x533，css像素比率为1.5

在这种情况下，一个32 x 32px的图像需要至少48 x 48px才能看起来很好和清晰。因为一些设备的像素比为2（iPhone 4/5），我通常使用2倍大的图像，它们看起来非常好，几乎和svg图像一样好（在旧浏览器中也没有问题）

执行此操作时，需要记住定义图像大小

background:url('myimage64.png'); background-size:32px 32px;
或
谢谢！现在看起来很清晰，但是很小。我如何使jquery控件和字体看起来更大？或者这会使它们再次变得模糊吗？@Stefan尝试将
initial scale=1.0
和/或
maximum scale=1.0
放在viewport meta标记中。如果你的应用程序是f，还要确保在那里有
width=device width
全宽。我都在里面。我试着将初始比例设置为1.5，但现在看起来又很糟糕。1.6稍微好一点，不过…@Stefan
initial scale=1.0
意味着它是100%（1px=1px）。为了保持清晰的外观，您需要放大代码中的所有内容，以匹配设备的大小。应用任何缩放或密度更改都会使项目再次模糊。我希望jquery mobile会解决这一问题。奇怪的是，我必须手动修复所有这些问题。您的工作正常吗。我也遇到了同样的问题。在e中看起来很好mulator，但在设备中搞砸了。我尝试设置@dSquared建议。这比最初的尝试要好。但是表单控件和按钮边缘模糊…有什么想法吗？ 
background:url('myimage64.png'); background-size:32px 32px;

<img src='myimage64.png' width='32' height='32'>