在非移动页面上检测移动设备屏幕的宽度和高度

Question

我在未格式化为移动设备的页面上有一个div元素。 我不想将此页面设置为适合移动设备的格式。 单击时，div扩展到移动设备的大小。 当div位于空白页面上时，此方法有效，但当div位于充满内容的页面上时，则无效。 我尝试使用多种方法来检测屏幕或窗口的高度/宽度，但无法正确缩放。 我认为正在发生的事情是：

div可以正确检测设备的像素宽度和高度-因此对于Droid Razr Maxx，它可以纵向检测到540x960。 因为这是一个非移动网站，所以网站被格式化为缩小视图。 我不想调整实际网页的缩放机制，因此div的格式设置为540x960，但相对于文档的大小-而不是实际的屏幕。

我需要做的是检测可见帧的像素大小，然后将div调整为相对于屏幕而不是页面的大小。 还是我需要在缩小模式下检测页面的大小-然后缩放到该大小？

不幸的是，目前我无法提供示例代码。

有人可以协助吗？

谢谢！

Answer 1

没有示例代码很难准确地知道您要完成的任务，但是我将解释我的理解以及可能的解决方案。

听起来您有一个元素，当单击该元素时，它会扩展到屏幕的宽度。 但是，在手机中，屏幕！=页面。 您希望元素仅保留与屏幕一样宽的大小，而不管缩放级别如何。

如果我正确理解了这一点，那么听起来您可能需要创建一些jQuery（或POJS），以调整窗口大小而不是页面大小。 用户缩放时，window.innerWidth属性将更新。 您可能可以使用此值，而不是clientWidth或任何类似值。

以下是使用window.innerWidth获取缩放级别的示例：

在Safari中使用jQuery检测页面缩放更改