【实战】H5 页面同时适配 PC & 移动端

2024-07-18 02:30| 来源: 网络整理| 查看: 265

文章目录一、场景二、方案三、书单推荐01 《深入实践Kotlin元编程》02 《Spring Boot学习指南》03 《Kotlin编程实战》

一、场景

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

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

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

const isPhone = document.body.clientWidth

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章