如何计算移动设备的宽度和高度

Posted

技术标签:

【中文标题】如何计算移动设备的宽度和高度【英文标题】:how to calculate width and height of mobile device 【发布时间】:2012-04-08 11:51:31 【问题描述】:

我想在 document.body 下创建一个 div。 该 div 的宽度和高度应该是这样的 它完全适合移动设备,现在该设备可以 像 ipad 这样的平板电脑或像 iPhone 这样的移动设备,或任何网页 桌面浏览器。 我尝试使用 screen.width 和 screen.height,但这些值不是 完全等于设备的宽度和高度! 然后凭经验我尝试从中减去一些数字,得到18 当 div 的宽度和高度 = sreen.width 和 screen.height 时,避免在 document.body 上滚动。 但即使是这个数字也不是在所有浏览器上都一致。

我还有一个问题,在 iPhone 上,如果我们将视图从纵向更改为横向, 为什么字体大小会改变? 我在 html 页面上有这个元标记

【问题讨论】:

【参考方案1】:

尝试使用php browser detection library

它提供了大量关于操作系统、浏览器等的信息。

【讨论】:

【参考方案2】:

你可以使用 jQuery:

var w = $(document).width();
var h = $(document).height();
//your div, for example with class 'loremIpsum', will get exactly that sizes with:
$('div.loremIpsum').width(w).height(h);

【讨论】:

以上是关于如何计算移动设备的宽度和高度的主要内容,如果未能解决你的问题,请参考以下文章

H5 移动端布局

jquery js获取移动设备浏览器高度

计算移动设备上的屏幕高度

innerWidth 在移动设备上没有得到正确的宽度

由于视图宽度,移动设备会拉伸屏幕的 div

antdesignvue手机怎么适配