iphone - 横屏适配解决方案

最新推荐文章于 2024-07-16 16:27:07 发布

userDengDeng

最新推荐文章于 2024-07-16 16:27:07 发布

阅读量283

点赞数

CC 4.0 BY-SA版权

文章标签： html css 适配器模式

本文链接：https://blog.youkuaiyun.com/userDengDeng/article/details/115622775

本文介绍了如何解决iPhone横屏适配问题，采用阿里解决方案flexible，根据设计稿设置不同屏幕尺寸下的font-size以实现rem适配。在实际应用中，遇到横竖屏切换时的浏览器重绘问题，采取了横屏切换后刷新页面的策略。此外，还讨论了弹出层与底层滚动穿透、视频区域缩放影响better-scroll操作以及弹出层滚动焦点等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用阿里的解决方案 flexible
设计稿横屏： 1334 * 750
设计稿竖屏： 750 * 1334

let docEl = document.documentElement
function refreshRem (){
	let width = docEl.getBoundingClientRect().width
	let realWidth = width / dpr
	if (realWidth > 1000 ) {
		width = 750 * dpr // 750 的取值已设计稿的标准来决定
	} else if (realWidth <= 1000) {
		width = 375 * dpr
	}
	var rem = width / 10
	docEl.style.fontSize = rem + 'px'
	flexible.rem = window.rem = rem
}

在设备宽度大于1000px 的屏幕上，根 font-size: 75px；在css 设置的宽高会根据 font-size 的值计算转换成 rem，做到在H5大小屏幕上的适配

<html data-dpr="1"  style="font-size: 37.5px;"></html>

适配中遇到的问题点

横竖屏频繁切换，浏览器重绘导致的表现不一致问题
我们出的方案是：横竖屏切换之后刷新 docment.reload()
弹出层与底层的滚动穿透问题
放大视频区域之后，加有 better-scroll 的区域无法操作缩小
4.弹出层无法滚动（滚动焦点在底层）