datagridview cell字体大小自适应_移动端实现自适应缩放界面的方法汇总

8bacc0245ad0f04e92d95a8f0161bb0a.gif

作者 | 唐宋元明清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:
添加一段设置zoom值的函数:
 getScript() {    return `      const zoomValue=window.innerWidth / 375;      document.documentElement.style.transform="scale("+zoomValue+")";      document.documentElement.style.transformOrigin="left top";     ;  }
注: 以上也可以直接写script,我上面返回一段html是因为项目是通过服务端渲染的。 样式的设置必须在界面加载之前,否则会因界面显示变更出现闪现问题。 因为添加了服务端渲染,所以无法在界面一开始初始时,无法获取window、document等对象。而上面html的注入,对服务端渲染机制的一个黑科技~ 上面的方案完成后,看看效果。然后坑出来了:
  1. 项目设置的absolue元素width 100%失效了 -- 可以设置固定的宽度解决

  2. 弹框position=fixed位置飞到天边去了 -- 这个无法规避。

网上找到了一篇文章 CSS3 transform对普通元素的N多渲染影响 ,介绍了transform的一堆坑。 我这个项目一些布局需要position=fixed,所以tranform不适合~放弃 这个坑的其它介绍可以参考下:
  • transform限制position:fixed的跟随效果

  • 关于在transform下的子元素设置fixed无效的困惑

总结:
  1. position:fixed不支持,所以想做标题栏置顶,上面方案是无法实现的。

  2. ipad有遗留问题:微信浏览器,横竖屏切换时,有些机型在打开一瞬间,横向拖动有空白问题。这个问题无法处理~

  3. 以上方案因为使用了scale,同时窗口的宽高window.innerHeight无法准确获取,需要除以比例,比如: window.innerHeight / (window.innerWidth / 375)

方案二:设置zoom

在上一个方案的基础上,尝试zoom缩放:
 getScript() {return `const zoomValue=window.innerWidth / 375;document.documentElement.style.zoom = zoomValue;;}
emmm,很简单,调试效果看起来很不错。模拟机上,看起来都正常~ 但是坑来了:真机有问题,发现在ipad的safari上,页面是放大了,但是字段根本就没变化! 原因竟然是:苹果在ipad的网页,改动渲染方面的相关规则。有点坑~ https://apple.stackexchange.com/questions/377216/css-zoom-does-not-work-ipad-os-v13-latest-safari https://stackoverflow.com/questions/7907760/why-the-font-size-wont-change-with-browser-zoom-in 实现没办法,我后面尝试, 通过userAgent对ipad机型(ipad、macintosh)特殊处理,直接获取所有包含了文字的div、p、span等元素,放大font-size。 发现可以处理,没毛病!但是也有些缺陷,没办法在一开始处理字体,因为元素还没有初始化,而等界面加载后再刷字体大小,界面会闪现一次。

方案三:设置viewport-scare

在html中添加默认viewport:
ps:minimal-ui 与本文无关,它可以在safari加载网页时隐藏地址栏与导航栏 添加viewport更新:
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" ; }
运行代码,emmm,有一些小问题。
  • margin:auto,在某些布局下会让页面偏移 -- 删除就好

  • 设置background-image的区域,背景图片并没有填充满 -- 添加width:100%解决

  • position:fixed,宽高显示有问题 -- 设置固定宽度,比如375px,固定高度;如果需要全屏,可以使用height: 100vh。

fixed布局建议:以弹框为例 添加fixed布局的容器,水平竖直方向靠边距离分别设置一个就行了,left:0,bottom:0。 然后添加absolute布局的内容容器.如果需要居中,可以在js中设置bottom=window.innerHeight / 2 - 元素的高度/2 总结:
  • 以上方案不支持fixed布局,修改完成后,ipad的水平滚动条依然存在,无法解决

兼容适配

采用第二个zoom缩放方案,同时对ipad机型特殊处理,另外采用scale缩放方案。 完整代码如下: 1. 初始化适配(支持服务端渲染) html-header添加script
{/* 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"    `; }
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事件、监测微信移动端横竖屏

本文完~ abb4f18bd87f6b793d7b6687030cddbf.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值