js实现视口
获取视口尺寸
通过 window.innerWidth 和 window.innerHeight 获取当前视口的宽度和高度（包含滚动条）：
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;若需排除滚动条宽度，使用 document.documentElement.clientWidth 和 clientHeight：
const noScrollbarWidth = document.documentElement.clientWidth;
const noScrollbarHeight = document.documentElement.clientHeight;监听视口变化
通过 resize 事件监听视口尺寸变化，并使用防抖优化性能：
function debounce(fn, delay) {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, arguments), delay);
};
}
window.addEventListener('resize', debounce(() => {
console.log(`New viewport size: ${window.innerWidth}x${window.innerHeight}`);
}, 300));检测移动设备视口
结合 window.screen.width 和 window.orientation 判断移动设备横竖屏：
const isMobilePortrait = window.innerWidth < window.innerHeight &&
window.screen.width < 768;
const isMobileLandscape = window.innerWidth > window.innerHeight &&
window.screen.width >= 768;设置视口 Meta 标签
通过 JavaScript 动态修改 <meta name="viewport"> 内容：
const metaViewport = document.querySelector('meta[name="viewport"]');
metaViewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0');视口相关 CSS 单位转换
将视口单位（vw/vh）转换为像素值：
function vwToPixels(vw) {
return (vw * window.innerWidth) / 100;
}
function vhToPixels(vh) {
return (vh * window.innerHeight) / 100;
}
