在JavaScript中获取手机屏幕尺寸,主要涉及到window.screen
对象,它提供了关于用户屏幕的信息。以下是一些基础概念和相关信息:
// 获取屏幕的宽度和高度
var screenWidth = window.screen.width;
var screenHeight = window.screen.height;
// 获取浏览器窗口内部的宽度和高度
var innerWidth = window.innerWidth;
var innerHeight = window.innerHeight;
// 获取浏览器窗口外部的宽度和高度
var outerWidth = window.outerWidth;
var outerHeight = window.outerHeight;
console.log("Screen Width: " + screenWidth);
console.log("Screen Height: " + screenHeight);
console.log("Inner Width: " + innerWidth);
console.log("Inner Height: " + innerHeight);
console.log("Outer Width: " + outerWidth);
console.log("Outer Height: " + outerHeight);
window.screen.width/height
返回的值可能不准确,特别是在有虚拟按键的手机上。可以使用window.visualViewport
来获取更准确的视口尺寸。var visualViewportWidth = window.visualViewport.width;
var visualViewportHeight = window.visualViewport.height;
console.log("Visual Viewport Width: " + visualViewportWidth);
console.log("Visual Viewport Height: " + visualViewportHeight);
resize
事件来处理这种情况。window.addEventListener('resize', function() {
var newScreenWidth = window.screen.width;
var newScreenHeight = window.screen.height;
console.log("Screen resized to: " + newScreenWidth + "x" + newScreenHeight);
});
通过这些方法和技巧,开发者可以更好地处理不同屏幕尺寸的设备,提供更好的用户体验。
领取专属 10元无门槛券
手把手带您无忧上云