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

我在未格式化为移动页面的页面上有div元素。尽管如此，我不想将此页面的格式设置为移动设备。点击后，div会扩展到移动设备的大小。这可以在div处于空白页面时起作用，但当div处于内容丰富的页面上时，它不起作用。我试图使用多种方式来检测屏幕或窗口的高度/宽度，并且它从不正确缩放。我认为正在发生的事情是：在非移动页面上检测移动设备屏幕宽度和高度

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

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

不幸的是，我现在无法提供示例代码。

任何人都可以协助吗？

谢谢！

来源

2012-09-11 Alex

你能描述缩放机制？ – Tsubashi

没有示例代码就很难确切地知道你正在努力完成什么，但我会解释我的理解和可能的解决方案。

这听起来像你有一个元素，点击后，展开到屏幕的宽度。但是，在手机中，屏幕！=页面。您希望元素保持与屏幕一样宽 - 无论缩放级别如何。

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

下面是使用window.innerWidth获得缩放级别的一个例子：

Detect page zoom change with jQuery in Safari

来源

2012-09-11 22:07:57

你肯定理解我在说什么我注意到的一件事是我可以使用'document.body.clientWidth'指定正确的宽度，但高度不能正确缩放。我可以通过这样做来调整高度：'（（screen.height）*（1.5））;'但我无法找到完美的调整。将'document.documentElement.clientWidth/window.innerWidth'给我正确的缩放％，然后我可以用它来缩放div高度？ – Alex

由于页面会像X一样缩放X，因此从逻辑上讲，缩放级别应该是另一个的缩放级别。 –

这实际上结束了工作： \t Width = document.body.clientWidth; \t Height = document.documentElement.clientHeight; – Alex

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

回答

相关问题