Web移动端实现自适应缩放界面的方法汇总
方案一: 设置tranform/scale
width: 375px; height: auto;
const scaleValue=window.innerWidth / 375
getScript() {
return `
const zoomValue=window.innerWidth / 375;
document.documentElement.style.transform="scale("+zoomValue+")";
document.documentElement.style.transformOrigin="left top";
;
}
项目设置的absolue元素width 100%失效了 -- 可以设置固定的宽度解决
弹框position=fixed位置飞到天边去了 -- 这个无法规避。
transform限制position:fixed的跟随效果
关于在transform下的子元素设置fixed无效的困惑
position:fixed不支持,所以想做标题栏置顶,上面方案是无法实现的。
ipad有遗留问题:微信浏览器,横竖屏切换时,有些机型在打开一瞬间,横向拖动有空白问题。这个问题无法处理~
以上方案因为使用了scale,同时窗口的宽高window.innerHeight无法准确获取,需要除以比例,比如: window.innerHeight / (window.innerWidth / 375)
方案二: 设置zoom
getScript() {
return `
const zoomValue=window.innerWidth / 375;
document.documentElement.style.zoom = zoomValue;
;
}
方案三: 设置viewport-scare
getScript() {
return `
const zoomValue=window.innerWidth / 375;
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"
;
}
margin:auto,在某些布局下会让页面偏移 -- 删除就好
设置background-image的区域,背景图片并没有填充满 -- 添加width:100%解决
position:fixed,宽高显示有问题 -- 设置固定宽度,比如375px,固定高度;如果需要全屏,可以使用height: 100vh。
以上方案不支持fixed布局,修改完成后,ipad的水平滚动条依然存在,无法解决
兼容适配
{/* app contentAutoFit */}
//返回自适应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"
`;
}
微信浏览器横竖屏切换时,某些机型不会触发窗口大小变更,所以需要额外添加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事件、监测微信移动端横竖屏