javascript - Phonegap Cordova - 改变整个设备的分辨率(不是 Canvas )

Question

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

有一种方法可以使用 window.screen.width 来定义 Canvas ，但我正在尝试更改 window.innerWidth & 的值窗口.innderHeight.

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

我不确定，但我认为这是通过 target-densitydpi=device-dpi 在 html 中定义 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

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

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

取两者中的最小值(或最大值，由您选择)并为文档元素应用 CSS 样式 :root { transform-origin: 0 0 0; transform: scale(<value>); } .也许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 ... 高度也一样。也许备份原件，并在方向更改事件中进行更正。