移动端屏幕适配需设置viewport使页面宽度等于设备宽度，并通过JavaScript动态获取devicePixelRatio和屏幕尺寸，结合rem布局实现等比缩放；1. 设置meta viewport控制布局宽度与缩放；2. 使用JS根据设计稿计算html的font-size，实现rem适配；3. 监听resize和orientationchange事件，及时调整布局；4. 利用env()和JS判断刘海屏等安全区域，添加对应类名处理留白。
移动端屏幕适配的核心在于让页面在不同尺寸和分辨率的设备上都能正常显示。JavaScript 在这一过程中可以动态获取设备信息并调整布局，配合 CSS 能实现更灵活的响应式效果。
理解 viewport 与设备像素比
移动浏览器默认会将页面缩放到一个“理想”的宽度（通常是 980px 左右），这会导致布局错乱。通过设置 viewport meta 标签，可以让页面宽度等于设备屏幕宽度：
“`html“`
其中关键参数说明：
width=device-width：使页面宽度等于设备屏幕宽度initial-scale=1.0：初始化不缩放user-scalable=no：禁止用户手动缩放（可选）
JavaScript 可以读取设备像素比（devicePixelRatio）来判断是否为高清屏（Retina），用于加载更高清的图片或做精细控制：
立即学习“Java免费学习笔记（深入）”；
“`jsconst dpr = window.devicePixelRatio || 1;console.log(‘设备像素比:’, dpr);“`
使用 JavaScript 动态设置根字体大小（rem 适配）
常见做法是将页面布局基于 rem 单位，通过 JS 动态设置 标签的 font-size，从而实现等比缩放。
例如：设计稿宽度为 750px，我们希望 1rem = 100px，那么在 375px 宽的屏幕上，html 的 font-size 应为 50px（375 / 750 * 100）。
“`jsfunction setRootFontSize() { const designWidth = 750; // 设计稿宽度 const baseFontSize = 100; // 1rem 对应的像素值 const screenWidth = window.innerWidth; const fontSize = (screenWidth / designWidth) * baseFontSize; document.documentElement.style.fontSize = fontSize + ‘px’;}
// 初始化和窗口变化时更新setRootFontSize();window.addEventListener(‘resize’, setRootFontSize);
之后在 CSS 中使用 rem 布局：
```css.box { width: 3.75rem; /* 对应设计稿 375px */ height: 2rem; /* 200px */}```监听屏幕变化与横竖屏切换
用户旋转设备时，屏幕宽度发生变化，需重新计算 rem 或调整布局。
除了 resize 事件，还可以监听 orientationchange 事件：
```jswindow.addEventListener('orientationchange', () => { setTimeout(setRootFontSize, 100); // 延迟执行确保获取最新尺寸});// 或使用 matchMedia 监听横竖屏const portrait = window.matchMedia("(orientation: portrait)");portrait.addEventListener('change', setRootFontSize);```处理 iOS 安全区域与刘海屏
现代 iPhone 存在安全区域（如刘海、底部黑条），CSS 提供了 env() 函数（如
```jsfunction isIPhoneWithNotch() { return /iPhone/.test(navigator.userAgent) && screen.width !== 375 || screen.height !== 812;}if (isIPhoneWithNotch()) { document.body.classList.add('has-notch');}```env(safe-area-inset-bottom)），但 JavaScript 也可辅助判断：然后在 CSS 中结合类名或环境变量处理留白。
基本上就这些。JavaScript 配合 CSS 能有效应对移动端多样化的屏幕，关键是统一设计基准，动态调整根尺寸，并关注设备特性。不复杂但容易忽略细节。
以上就是移动端适配_javascript屏幕适配的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1539633.html
微信扫一扫 
支付宝扫一扫 
