我做的极限摩托在科尔多瓦3.4的应用程序，并测试了Android 4.4.2，三星Galaxy王牌了Android 2.3和仿真器。我离开了CLI创建原始视：
I'm doing an application on Cordova 3.4 and testing on the Moto X with Android 4.4.2, Samsung Galaxy Ace with android 2.3 and the emulator. I leave the original viewport created by the cli:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
在CSS的我正与相对大小：
On the css I'm working with relative sizes:
html {
font-size: 62.5%;
}
p {
font-size: 1.4rem;
}
这两台设备上工作的很好，但是当我测试了一款LG G2采用Android 4.2.2，我看到的文字较小。我跟在模拟器上的所有4.x版的Android版本进行了测试，发现在4.0到4.3版本同样的问题，然后我发现安卓4.4.2现在使用Chrome和视见不相同的方式工作。
This work fine on both devices, but when I tested on a LG G2 with Android 4.2.2, I see the text smaller. I tested it with all the 4.x Android versions on the emulator, and found the same problem on 4.0 to 4.3 versions, and then I found that Android 4.4.2 now use Chrome and the ViewPort doesn't work the same way.
根据一些文章，Retina显示屏像屏幕上的正常行为是CSS的宽度较小，该装置的宽度，这是它的工作在Android 4.4.2的方式，但在4.0〜4.3的工作不同。这是使用配置该参数仿真器4.4.2和4.2.2之间的一些JavaScript性能的比较：屏幕：4.7，分辨率：720x1280，大小正常，屏幕比例：长，密度：xhdpi
Based on some articles, the normal behaviour on retina display like screens is that the css width is smaller that the device width, and this is the way it's working on Android 4.4.2, but in 4.0 to 4.3 work different. This is a comparison of some javascript properties between 4.4.2 and 4.2.2 using the emulator configured with this parameters: screen: 4.7", resolution: 720x1280, size: normal, screen ratio: long, density: xhdpi.
4.4.2
- window.devicePixelRatio: 2
- screen.width: 360
- document.width: 360
- window.innerWidth: 360
- document.documentElement.clientWidth: 360
- document.documentElement.offsetWidth: 360
- document.body.clientWidth: 360
4.2.2
- window.devicePixelRatio: 2
- screen.width: 720
- document.width: 720
- window.innerWidth: 720
- document.documentElement.clientWidth: 720
- document.documentElement.offsetWidth: 720
- document.body.clientWidth: 720
有一个时间的解决方案我想是利用媒体的查询，但我认为这可能是在平板电脑或其他设备存在问题。
A temporal solution I'm trying is using media queries, but I think it could be a problem on tablets or other devices.
html {
font-size: 125%;
}
@media all and (max-width: 400px) {
html {
font-size: 62.5%;
}
}
另一种解决办法是检查Android版本设置HTML字体大小。
Another solution could be to check the Android version to set the html font-size.
什么是处理与Android 4.0-4.3和4.4之间的这种矛盾的最好方法是什么？
What is the best way to deal with this inconsistency between Android 4.0-4.3 and 4.4?
推荐答案
我发现这个问题在处理的控制台上这样的警告：不支持视目标densitydpi 搜索这个警告，我发现这个博客帖子的目标densitydpi 是德precated的https://petelepage.com/blog/2013/02/viewport-target-densitydpi-support-is-being-de$p$pcated/
I found the problem while dealing with this warning on the console: Viewport target-densitydpi is not supported. Searching about this warning, I found on this blog post that target-densitydpi is deprecated https://petelepage.com/blog/2013/02/viewport-target-densitydpi-support-is-being-deprecated/
现在的问题是，属性目标densitydpi =设备DPI 告诉视口等于CSS像素宽度到设备像素宽度。由于Android上的镀铬视4.4.2忽略的属性，它扩展了CSS像素的宽度。
The problem is that the attribute target-densitydpi=device-dpi tell the viewport to equal the css pixels width to the device pixels width. Because the chrome viewport on Android 4.4.2 ignore that attribute, it scale the css pixels width.
删除该属性，我得到这个结果：
Removing that attribute, I got this results:
4.2.2
- screen.width: 720
- document.width: 360
4.4.2
- screen.width: 360
- document.width: 360
在Android 4.2.2， screen.width 不按预期，因为该属性必须返回设备像素宽度，但它不是一个问题，因为现在我的布局看起来一样在Android 4.4.2和4.2.2删除目标densitydpi 属性（我去掉贴在有关媒体查询替代）。
On Android 4.2.2, screen.width doesn't work as expected, because that property must return the device pixels width, but it's not a problem, because now my layout look the same on Android 4.4.2 and 4.2.2 removing the target-densitydpi attribute (I removed the media query alternative posted on the question).
相关推荐
最新文章