移动端Web应用加载时，如何通过CSS自动从竖屏切换至横屏？

嘿，这个问题问得很接地气！先直接给你结论：纯CSS完全做不到自动把移动端屏幕从竖屏切换成横屏。

为啥呢？因为CSS的定位是用来控制页面样式和布局的，它没有权限去操作设备的系统级设置——屏幕方向这种涉及硬件层面的控制，压根不在CSS的能力范围内。

不过别慌，我们有替代方案：用JavaScript的Screen Orientation API来实现这个需求，但有几个关键限制得提前说清楚：

• 浏览器出于安全考虑，不允许页面加载时直接调用这个API，必须要有用户交互触发（比如点击按钮、触摸屏幕），不然会直接报错。
• 这个API需要在HTTPS环境下才能正常工作（本地开发的localhost除外）。
• 部分老旧浏览器可能不支持，需要做兼容性判断。

下面给你一个简单的实现示例：

// 等页面加载完成后监听用户交互
window.addEventListener('load', () => {
  // 可以给页面里的任意可点击元素绑定触发事件，比如一个引导按钮
  const rotateBtn = document.querySelector('.rotate-btn');
  
  if (rotateBtn && 'orientation' in screen) {
    rotateBtn.addEventListener('click', async () => {
      try {
        // 锁定屏幕为横屏，可选值还有landscape-primary/landscape-secondary
        await screen.orientation.lock('landscape');
        console.log('屏幕已成功锁定为横屏');
      } catch (error) {
        console.error('锁定横屏失败:', error.message);
      }
    });
  }
});

另外补充一句：如果你只是想让页面在竖屏时视觉上呈现横屏布局，那CSS确实能做到——比如用transform: rotate(90deg)配合调整宽高，但这只是页面元素的旋转，实际屏幕方向并没有改变，用户的触摸操作还是会按照竖屏的坐标系来，体验会很别扭，所以这种方式只适合临时救急，不推荐作为常规方案。

内容的提问来源于stack exchange，提问作者Sahan Thilakarathna