Web移动端实现自适应缩放界面的方法汇总

2024-06-19 05:06| 来源: 网络整理| 查看: 265

作者 | 唐宋元明清2188

来源 | http://www.cnblogs.com/kybs0/

在开发App端的网页时，要适配iphone、ipad、ipod、安卓等各种机型，一般是直接使用em、px转em、界面缩放。

本章是通过将界面缩放，等比例显示在各机型上。过程中遇到了些问题和大坑~

然后下面是具体的自适应实现方式的尝试~

方案一：设置tranform/scale

首先设置内容固定宽度、自动高度（以下举例）

width: 375px; height: auto;

通过获取窗口的宽度与固定宽度相除，获得缩放比例

const scaleValue=window.innerWidth / 375

在html层，添加一段script：

{ __html: this.getZoomScript() }}>

自适应可执行代码文本。

//返回自适应html字符串 getZoomScript() { return ` const zoomValue = window.innerWidth / 375; const userAgentInfo = window.clientInformation.appVersion; //如果是ipad if (userAgentInfo.indexOf("iPad") != -1 || userAgentInfo.indexOf("Macintosh") != -1) { //内容自适应 - 设置transform-scale。 //fixed布局时需要修改下left/margin-left等，同时窗口的宽高无法准确获取，需要除以比例,详见windowSizeWithScaleHelper //ipad有遗留问题：微信浏览器加载时，横竖屏切换一瞬间，有空白问题。不过可以忽略~ document.documentElement.style.transform = "scale(" + zoomValue + "," + (zoomValue < 1 ? 1 : zoomValue) + ")"; document.documentElement.style.transformOrigin = "left top"; var html = document.querySelector("html"); html.style.width = '375px'; html.style.overflow = 'hidden'; html.style.overflowY = 'auto'; } else { //内容自适应 - 设置zoom。通过zoom来缩放界面，在ipad的safari浏览器等会存在字体无法缩放的兼容问题。 document.documentElement.style.zoom = zoomValue; } // 内容自适应 - 设置viewport,整体okay。但是ipad的水平滚动条无法解决 // var viewport = document.querySelector("meta[name=viewport]"); // viewport.content = "width=device-width,initial-scale=" + zoomValue + ", maximum-scale=" + zoomValue + ", minimum-scale=" + zoomValue + ",user-scalable=no, minimal-ui" `; }

2. 添加加载及界面变更刷新机制

微信浏览器横竖屏切换时，某些机型不会触发窗口大小变更，所以需要额外添加orientationchange监听

加载过程中，微信浏览器切换横竖屏会有显示问题，需要加载完成后适配

componentDidMount() { //window.onresize = this.adjustContentAutoFit; //解决微信横竖屏问题 window.addEventListener("orientationchange", this.adjustContentAutoFit); //解决加载过程中,切换横竖屏,导致界面没有适配的问题 this.adjustContentAutoFit(); } componentWillUnmount() { window.removeEventListener("orientationchange", this.adjustContentAutoFit); } //监听窗口尺寸变更，刷新自适应 adjustContentAutoFit() { const zoomValue = window.innerWidth / 375; const userAgentInfo = window.clientInformation.appVersion; //如果是ipad if (userAgentInfo.indexOf("iPad") != -1 || userAgentInfo.indexOf("Macintosh") != -1) { //内容自适应 - 设置transform-scale。 //fixed布局时需要修改下left/margin-left等，同时窗口的宽高无法准确获取，需要除以比例,详见windowSizeWithScaleHelper //ipad有遗留问题：微信浏览器，横竖屏切换时，有些机型在打开一瞬间，有空白问题。不过可以忽略~ document.documentElement.style.transform = "scale(" + zoomValue + "," + (zoomValue < 1 ? 1 : zoomValue) + ")"; document.documentElement.style.transformOrigin = "left top"; var html = document.querySelector("html") as HTMLElement; html.style.width = '375px'; html.style.overflow = 'hidden'; html.style.overflowY = 'auto'; } else { // 内容自适应 - 设置zoom。通过zoom来缩放界面，在ipad的safari浏览器等会存在字体无法缩放的兼容问题。 document.documentElement.style.zoom = zoomValue; } // 内容自适应 - 设置viewport,整体okay。但是ipad的水平滚动条无法解决 // var viewport = document.querySelector("meta[name=viewport]"); // viewport.content = "width=device-width,initial-scale=" + zoomValue + ", maximum-scale=" + zoomValue + ", minimum-scale=" + zoomValue + ",user-scalable=no, minimal-ui" }

此方案的一些小遗留问题：

ipad不支持position:fixed，所以无法实现标题栏置顶等功能

微信浏览器，横竖屏切换时，有些机型在打开一瞬间，有空白问题

参考：

IOS环境下固定定位position:fixed带来的问题与解决方案

小技巧css解决移动端ios不兼容position:fixed属性，无需插件

踩坑路上——IOS Safari浏览器下固定定位position:fixed带来的问题与解决方案

iphone safari不支持position fixed的解决办法

orientationchange事件、监测微信移动端横竖屏

本文完~

【本文地址】

公司简介

联系我们