移动端适配_javascript屏幕适配-js教程-PHP中文网

移动端适配_javascript屏幕适配

夢幻星辰

发布： 2025-12-01 18:47:10

原创

605人浏览过

移动端屏幕适配需设置viewport使页面宽度等于设备宽度，并通过JavaScript动态获取devicePixelRatio和屏幕尺寸，结合rem布局实现等比缩放；1. 设置meta viewport控制布局宽度与缩放；2. 使用JS根据设计稿计算html的font-size，实现rem适配；3. 监听resize和orientationchange事件，及时调整布局；4. 利用env()和JS判断刘海屏等安全区域，添加对应类名处理留白。

移动端适配_javascript屏幕适配

移动端屏幕适配的核心在于让页面在不同尺寸和分辨率的设备上都能正常显示。JavaScript 在这一过程中可以动态获取设备信息并调整布局，配合 CSS 能实现更灵活的响应式效果。

理解 viewport 与设备像素比

移动浏览器默认会将页面缩放到一个“理想”的宽度（通常是 980px 左右），这会导致布局错乱。通过设置 viewport meta 标签，可以让页面宽度等于设备屏幕宽度：

```html ```

其中关键参数说明：

width=device-width：使页面宽度等于设备屏幕宽度
initial-scale=1.0：初始化不缩放
user-scalable=no：禁止用户手动缩放（可选）

JavaScript 可以读取设备像素比（devicePixelRatio）来判断是否为高清屏（Retina），用于加载更高清的图片或做精细控制：

移动端适配rem&vw计算工具

查看详情

立即学习“Java免费学习笔记（深入）”；

```js const dpr = window.devicePixelRatio || 1; console.log('设备像素比:', dpr); ```

使用 JavaScript 动态设置根字体大小（rem 适配）

常见做法是将页面布局基于 rem 单位，通过 JS 动态设置 <html> 标签的 font-size，从而实现等比缩放。

例如：设计稿宽度为 750px，我们希望 1rem = 100px，那么在 375px 宽的屏幕上，html 的 font-size 应为 50px（375 / 750 * 100）。

```js function 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);

<p>之后在 CSS 中使用 rem 布局：</p>
<font color="#666">```css
.box {
  width: 3.75rem; /* 对应设计稿 375px */
  height: 2rem;   /* 200px */
}
```</font>

<H3>监听屏幕变化与横竖屏切换</H3>
<p>用户旋转设备时，屏幕宽度发生变化，需重新计算 rem 或调整布局。</p>
<p>除了 <strong>resize</strong> 事件，还可以监听 <strong>orientationchange</strong> 事件：</p>
<font color="#666">```js
window.addEventListener('orientationchange', () => {
  setTimeout(setRootFontSize, 100); // 延迟执行确保获取最新尺寸
});

// 或使用 matchMedia 监听横竖屏
const portrait = window.matchMedia("(orientation: portrait)");
portrait.addEventListener('change', setRootFontSize);
```</font>

<H3>处理 iOS 安全区域与刘海屏</H3>
<p>现代 iPhone 存在安全区域（如刘海、底部黑条），CSS 提供了 env() 函数（如 <code>env(safe-area-inset-bottom)</code>），但 JavaScript 也可辅助判断：</p>
<font color="#666">```js
function isIPhoneWithNotch() {
  return /iPhone/.test(navigator.userAgent) && screen.width !== 375 || screen.height !== 812;
}

if (isIPhoneWithNotch()) {
  document.body.classList.add('has-notch');
}
```</font>
<p>然后在 CSS 中结合类名或环境变量处理留白。</p>

<p>基本上就这些。JavaScript 配合 CSS 能有效应对移动端多样化的屏幕，关键是统一设计基准，动态调整根尺寸，并关注设备特性。不复杂但容易忽略细节。

登录后复制

以上就是移动端适配_javascript屏幕适配的详细内容，更多请关注php中文网其它相关文章！