Phonegap Cordova - 改变整个设备的分辨率（不是画布）

Question

我正在尝试更改应用的整体尺寸。它读取 360x640。我的画布 DPI 大 4 倍，因此使用 window.screen.width 给我 1440x2560。

有一种方法可以使用window.screen.width 来定义画布，但我正在尝试更改window.innerWidth 和window.innderHeight 的值。

我面临的主要问题是当我拖动一个元素时，我的 touchmove 每 4 个像素移动 1 个像素，因为应用程序本身的宽度是 360，而画布是 1440，因此我的 touchmove 每 4 个像素在设备上移动 1 个像素.虽然我实现了 60fps 的拖动，但如果你仔细观察，它会给拖动一种块移动的效果，而不是平滑。

我不确定，但我认为这是通过在 html 中由 target-densitydpi=device-dpi 定义 viewport 解决的，但这已被弃用。

我想我需要的是一种让window.innerWidth等于window.screen.width的方法，这可能吗？

window.innerWidth   == 360px //Can I change these values?
window.innerHeight  == 640px //Can I change these values?
window.screen.width == 1440px
window.scree.height == 2560px

P.S 如果问题不清楚，请不要犹豫！

Answer 1

投票支持 Marcos Pérez Gude。

请同时发布您的 CSS。

当你在 head 中添加视口标签时

<meta name="viewport" content="width=device-width; height=device-width; initial-scale=1" /> 

如果您在 CSS 中没有固定高度和宽度，它将匹配您的 html 正文宽度和高度以适应屏幕。 如果您在 CSS 中设置，请删除高度和宽度。

视口肯定会工作。

Answer 2

好吧，这有点像 hack。老实说，Marcos Pérez Gude 提到的视口应该可以工作，您应该尝试更多地使用它，但移动设备可能会如此不一致...... 编辑：某些设备故意报告不正确的尺寸以强制执行统一缩放。

使用 javascript 计算window.screen.width / window.innerWidth 的比例，对高度做同样的事情...

取两者中的最小值（或最大值，由您选择）并为文档元素 :root { transform-origin: 0 0 0; transform: scale(<value>); } 应用 CSS 样式。也许html 而不是:root。

这就是它的样子。

:root { transform-origin: 0 0 0; transform: scale(0.5); }
#example { width: 400px; border: 1px solid black; }

Hello guys. I'm moving between the CSS pixels!
<div id="example"> I AM 400 PIXELS WIDE! ... or 200 pixels wide? </div>

如下所示，还有一个普通的 ole zoom。应该是一样的效果。

:root { zoom: 0.5; }
#example { width: 400px; border: 1px solid black; }

Hello guys. I'm moving between the CSS pixels!
<div id="example"> I AM 400 PIXELS WIDE! ... or 200 pixels wide? </div>

下面是一个没有缩放或缩放的比较示例。

#example { width: 400px; border: 1px solid black; }

Hello guys. I'm moving between the CSS pixels!
<div id="example"> I AM 400 PIXELS WIDE! ... or 200 pixels wide? </div>

现在关于使innerWidth 与screen.width 相同...属性是可变的，因此在计算和缩放之后，您可以立即执行window.innerWidth = window.screen.width ...和高度相同.也许备份原件，并在方向更改事件中进行更正。