科尔多瓦安卓应用程序中的解决问题答案

【问题标题】：resolution issue in cordova android app科尔多瓦安卓应用程序中的解决问题
【发布时间】：2016-06-02 16:45:06
【问题描述】：

我正在将科尔多瓦与 jquery mobile 一起用于一个 android 应用程序。对于 Viewport 元标记，我使用以下代码

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

对于较旧的 jquery mobile 版本，它返回设备的实际高度和宽度，但是当我将 jquery mobile 升级到 1.4.5 和 cordova 到 5.0 时，它会返回一些不同的分辨率与 window.innerHeight 和 window.innerWidth

基于此分辨率，我正在使用媒体查询获取 css 文件

请帮帮我

问候，绑定

【问题讨论】：

标签： android html cordova jquery-mobile

【解决方案1】：

有了这个对我有用，试试吧

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

【讨论】：

【解决方案2】：

媒体查询是错误的方法有几个原因：

你不会得到与你的屏幕完全匹配的，比例布局对于某些元素是不可能的
您将无法定位 Android 4.0+。 Quad-HD 和较旧的设备使用相同的比例和不同的设备像素比率因子。 Android 版本对因素的解释不同，所以有些显示会乱七八糟
媒体查询旨在为不同分辨率提供不同的视觉效果，而不是跨分辨率缩放的相同视觉效果

我建议使用https://github.com/biodiv/cordova-anyscreen（并删除 jquery mobile）。它还将为您提供正确的显示和可用的分辨率，如app.deviceWidth、app.deviceHeight 和app.containerWidth 等。

【讨论】：

【解决方案3】：

我目前的解决方法：

在 index.html 中：<meta name="viewport" content="user-scalable=no, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, width=device-width, viewport-fit=cover">
在 index.css 中的“body”部分，添加：transform-origin: 0px 0px; transform: scale(0.5);

window.innerHeight 和 window.innerWidth 具有原生分辨率。

但是如果一个像素是一个像素，还没有运行测试。此外，我没有足够的设备来测试它是否适用于不同的设备和不同版本的 android。

【讨论】：