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

Posted 2023-05-07

【中文标题】计算移动设备上的屏幕高度

【英文标题】：Calculate the Screen Height on a Mobile Device

【发布时间】：2017-05-31 21:01:42

【问题描述】：

这让我发疯。很多时候我有轮播等，我需要用 javascript 响应式地重置屏幕高度。问题是，对于移动设备，屏幕高度包括顶部的小 URL 窗口，因此页面高度由 "window.innerHeight" 或 $(window).height();已关闭。有解决方法吗？无时无刻不在发生。

【参考方案1】：

改用“clientWidth”和“clientHeight”

Determining the dimensions of elements

【讨论】：

据我所知，所有浏览器都支持这些属性

【参考方案2】：

这取决于缩放是否受视口影响。只需使用纯 js 来获取价值。控制起来会容易得多：

//Screen
var w = screen.width;
var h = screen.height;
console.log('screen = ',w,' & ',h);
//Screen with ratio
var ratio = window.devicePixelRatio || 1;
var w = screen.width * ratio;
var h = screen.height * ratio;
console.log('screen = ',w,' & ',h);

//Document
  //PS document.width & document.height is no longer supported
var w  = window.innerWidth
|| document.documentElement.clientWidth //for IE 8 or lower
|| document.body.clientWidth;  //for IE 8 or lower
var h = window.innerHeight
|| document.documentElement.clientHeight  //for IE 8 or lower
|| document.body.clientHeight;  //for IE 8 or lower
console.log('client = ',w,' & ',h);
//Document offset
var w = document.body.offsetWidth
var h = document.body.offsetHeight
console.log('offset = ',w,' & ',h);
//Document fractional offset
var c = document.body.getBoundingClientRect()
console.log(c);
//Scroll
var x = window.scrollX || window.pageXOffset;
var y = window.scrollY || window.pageYOffset;
console.log('scroll = ',x,' & ',y);

享受;)