【实战】H5 页面同时适配 PC 移动端 —— 旋转横屏

---

一、场景

一个做数据监控的单页面，页面主要内容是一个整体必须是宽屏才能正常展示，这时就不能用传统的适配方案了，需要页面旋转为横屏展示
本场景中：

• 尺寸相对单位使用 vh（视高的1%）
• 展示内容类似脑图，根在上（数据源），分四层，每层节点较多所以只能横屏展示
• 未使用第三库（无法直接展示为根左向右数据分发）

二、方案

相对原PC页，重构过程中主页面只增加判断逻辑（不直接判断是否手机端，只判断可见窗口宽高比）：

const isPhone = document.body.clientWidth < document.body.clientHeight

样式文件（css-in-js）分两种：

• 布局：layout.js（使用了@emotion/react）
• 样式：style.js（正常 js-obj）

其中 layout.js 分开两种：

• layout.js（保持原状）
• layoutPhone.js（直接 vh 改 vw，且最外层容器旋转 transform：rotate(90deg)）

注意：由于被旋转元素的基点默认为自身的中心点。因此需要设置一下它的旋转中心为左上角（transform-origin: 0% 0%；），这样页面被“转出了屏幕”停留在屏幕的左侧，最后一步只需要将它往右平移一个屏幕的宽度就刚刚好（left：100vw），如下:

export const Container = styled.div`...transform：rotate(90deg);transform-origin: 0% 0%;position: absolute;left: 100vw;
`

style.js 使用变量 $h 保存垂直预览页面时，视图高度代表设备的高或宽

• PC端：$h = ‘vh’
• 手机端：$h = ‘vw’

其他情况自行兼容处理。。。

over

---

三、书单推荐

01 《深入实践Kotlin元编程》

$$《深入实践Kotlin元编程》$$
$$作者：霍丙乾$$

推荐语：猿辅导资深Kotlin专家、Google开发者专家撰写，Kotlin中文站负责人等多位专家推荐，降低元编程学习门槛。

这是一本从基础知识、设计思想、技术方案、应用方法、实践技巧5个维度系统讲解Kotlin元编程，并以此大幅提升Kotlin工程师开发水平、研发效率和开发体验的著作。

作者是Kotlin领域的资深专家和布道者，本书源于他对Kotlin编译器源码的反复研读和大量的工程实践，不仅细致讲解了反射、程序静态分析、 Java注解处理器、Kotlin符号处理器、Kotlin编译器插件、元程序的开发和调试等核心元编程技术，而且详细剖析了Jetpack Compose的编译器插件和IntelliJ 插件、AtomicFU 的 JVM 字节码和JavaScript代码的生成逻辑。

02 《Spring Boot学习指南》

$$《SpringBoot学习指南》$$
$$构建云原生Java和Kotlin应用程序$$
$$作者：[美]马克\cdot 赫克勒(MarkHeckler)$$

推荐语：行业专家撰写，涵盖开发Spring Boot 应用程序的诸多复杂细节，代码示例相互关联且易于理解。

本书将带你理解Spring Boot的架构和方法，包括调试、测试和部署等主题。如果你想使用Spring Boot来快速、有效地开发云原生Java或Kotlin应用程序(使用响应式编程、构建API以及创建各种数据库访问)，那么本书就是为你准备的。

03 《Kotlin编程实战》

$$《Kotlin编程实战》$$
$$创建优雅、富于表现力和高性能的JVM与Android应用程序$$
$$作者：[美]文卡特\cdot 苏布拉马尼亚姆$$

推荐语：Jolt Productivity获奖作者编写，Kotlin首席设计师Andrey Breslav作序推荐，助你开启通往Kotlin世界的大门。

阅读本书，不仅可以通过易于理解的示例学习使用Kotlin语言的许多特性，还可以学习编写易于维护、高性能的JVM和Android应用程序，创建DSL和异步编程等。

本书会带你使用你喜欢的IDE并利用大量示例和练习来提高你的Kotlin技能。你将学习创建独立的小程序并以脚本的形式运行，创建类型安全的代码，然后将这些知识进一步拓展，以创建易于扩展的、完全面向对象的、函数式风格的代码。还将学习如何在不影响效率或性能的情况下优雅地编程，以及如何使用元编程来创建高度富有表现力的代码，并创建利用语言流畅性优势的内部DSL。与此同时，你也会学习协程、异步编程、自动化测试的相关知识，并学习在企业级应用中混合使用Kotlin与Java。