问题描述
我使用Phonegap为Android平台创建了一个应用。
要补偿不同的设备分辨率（dpi）和屏幕尺寸，所有UI元素的尺寸都已按em指定。然后我使用CSS媒体查询设置不同的基本字体大小使用-webkit-device-pixel-ratio。
一切用来正常工作和预期，直到我发现target-densitydpi = device-dpi已被webkit弃用，并且支持将来会被删除。
这是我的meta视口标签，然后再移除target-densitydpi：
I have created an app using Phonegap for the Android platform.To compensate for different device resolutions (dpi) and screen sizes, the dimensions of all UI elements have been specified in terms of em. Then I am using CSS media queries to set a different base font size using -webkit-device-pixel-ratio.Everything used to work fine and as expected until I found out that target-densitydpi=device-dpi is deprecated by webkit and support will be removed in future.Here is my meta viewport tag before removing the target-densitydpi :
<meta name="viewport" content="user-scalable=no, initial-scale=1, width=device-width, target-densitydpi=device-dpi">
我发现当我删除target-densitydpi，应用程序不再看起来像预期的，的视口显着减少。这里是在Xperia L（Android 4.1.2）的宽度为480px，window.devicePixelRatio为1.5：
I found when I remove target-densitydpi, the app no longer looks as expected, in fact the dimensions of viewport decreases dramatically. Here are the before and after screenshots taken on Xperia L (Android 4.1.2) having a width of 480px and window.devicePixelRatio of 1.5:
之前和之后的屏幕截图删除target-densitydpi：
before removing target-densitydpi :http://imgur.com/c0Vnusk
删除后target-densitydpi：
after removing target-densitydpi :http://imgur.com/06mnUlJ
应用程序应该看起来像以前的屏幕截图，没有target-densitydpi，但我真的迷失在如何实现呢？是否需要重写CSS值？
有没有办法强制使用target-densitydpi = device-dpi而不使用元标记？
The app is supposed to look like the former screenshot without target-densitydpi, but I am really lost on how to achieve that? Will it require rewriting of CSS values?Is there a way to enforce target-densitydpi=device-dpi without using the meta tag?
推荐答案
解决方案使用jQuery
I found the solution using jQuery
我添加了下面的代码，它现在正常工作，（我已经添加了id ='viewport'到我的元html标签）
I added the following code and it works as expected now, (I've added id='viewport' to my meta html tag)
var viewportScale = 1 / window.devicePixelRatio;
$("#viewport").attr("content","user-scalable=no, initial-scale="+viewportScale+", minimum-scale=0.2, maximum-scale=2, width=device-width");
这将支持window.devicePixelRatio范围从0.5到6的屏幕
This will support screens with window.devicePixelRatio ranging from 0.5 to 6
这篇关于调整Phonegap应用程序UI，而不使用target-densitydpi = device-dpi的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！