移动端横竖屏适配那些事儿及常见坑位分析

优化前：卡得不行

那个横竖屏切换体验啊，真是让我头疼不已。之前的做法就是在CSS里写了@media查询，以为万事大吉，结果一到用户手里，各种卡顿、页面错位，简直让人抓狂。优化前，页面加载时间平均要5秒以上，特别是在移动设备上，横竖屏切换简直就是一场灾难。

找到痛点了！

首先得找出问题在哪里。我用Chrome的DevTools里的Performance面板录了一波，发现问题主要出在样式重绘和布局重构上。每当我切换横竖屏时，浏览器都要重新计算样式和布局，这过程耗时可不短。再加上我之前的代码里，有些地方写的不够优化，比如事件监听器没及时移除，导致资源占用过高。

优化后：流畅多了

经过一番折腾，我决定从以下几个方面入手：

• 减少不必要的样式重绘和布局重构。
• 优化事件监听器的管理。
• 利用硬件加速提高渲染性能。

首先，在CSS里，我尽量减少了使用会导致重绘的属性，比如width、height、margin、padding等。转而使用transform和opacity这些属性，因为它们只会影响合成层，而不影响布局和样式。

然后，我在JavaScript里，对事件监听器进行了更好的管理。每次切换横竖屏时，我会移除旧的监听器，然后再添加新的。这样可以避免内存泄漏，提高性能。

最后，我还用了will-change属性来提前通知浏览器哪些元素可能会发生变化，从而提前做好优化。

具体代码变化如下：

/* 优化前 */
@media (orientation: landscape) {
  .container {
    width: 100%;
    height: auto;
  }
}

@media (orientation: portrait) {
  .container {
    width: auto;
    height: 100%;
  }
}

/* 优化后 */
@media (orientation: landscape) {
  .container {
    transform: translateX(0);
    will-change: transform;
  }
}

@media (orientation: portrait) {
  .container {
    transform: translateY(0);
    will-change: transform;
  }
}

// 优化前
window.addEventListener('resize', function() {
  if (window.innerWidth > window.innerHeight) {
    document.body.classList.add('landscape');
  } else {
    document.body.classList.remove('landscape');
  }
});

// 优化后
let resizeHandler = null;

function handleResize() {
  if (window.innerWidth > window.innerHeight) {
    document.body.classList.add('landscape');
  } else {
    document.body.classList.remove('landscape');
  }
}

function setupResizeListener() {
  if (resizeHandler) {
    window.removeEventListener('resize', resizeHandler);
  }
  resizeHandler = handleResize;
  window.addEventListener('resize', resizeHandler);
}

setupResizeListener();

性能数据对比

优化后的效果非常明显，页面加载时间从原来的5秒以上降到了800毫秒左右，而且横竖屏切换也变得非常流畅，几乎没有卡顿现象。这让我心里的石头终于落地了。

以上是我的优化经验，有更好的方案欢迎交流

这个优化方案并不是最优的，但至少解决了我的燃眉之急。如果大家还有更好的方案，欢迎在评论区交流，我们一起学习进步。