Question

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

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

我面临的主要问题是当我拖动一个元素时，它每4像素触摸移动1个像素，因为应用程序的宽度本身是360，画布是1440，因此在设备上移动1个像素，每4px我的touchmove 。即使我达到60fps的阻力，如果仔细观察，它会给拖动带来一种阻挡移动效果，而不是平滑。

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

我认为我需要的是一种使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

如果问题不清楚，请随时回答！

Answer 1

好吧，这是一种黑客行为。老实说，MarcosPérezGude所提到的视口效果应该可行，你应该尝试更多，但移动设备可能会如此不一致... 编辑：某些设备报告故意不正确的尺寸强制执行统一缩放。

使用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>

如下图所示，还有简单的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 ..和高度相同。也许备份原件，并在方向更改事件上进行更正。

Answer 2

对MarcosPérezGude投票赞成。

请发布您的CSS。

在头部添加视口标记

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

它符合你的html体宽＆amp;如果你没有固定高度和高度，适合屏幕的高度CSS中的宽度。请删除身高＆amp;如果你在CSS中设置了宽度。

视口肯定会有用。

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

2 个答案: