iframe在挪动端放缩的示例编码

日期:2021-02-23 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

工作中中碰到个怪异的难题,折腾了一大半天,终究算是处理了,这里把剖析思路调解决方法纪录下。

新项目是做回应式的企业官方网站,早期的静态数据图网页页面切完后就递交给后台管理做为模版应用了,我也就基础撤出新项目。

在后端开发落地时发如今在挪动端网页页面显示信息不太对劲,显得很模糊不清。第1念头是meta的头顶部被遮盖了,查询源码果真发现是被遮盖了。

这是我习惯性用的meta头顶部,使网页页面宽度依据机器设备宽度自融入转变

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

但是后端开发落地的架构是按模版立即引进的,有一部分的公共性資源居然也包括了设定viewport的meta。后端开发引进的是这个模样的:

<meta name="viewport" id="viewport" content="width=640px, user-scalable=no">

这1头顶部是被1段迫不得已被添加的js文档所append进到的,并且被确立告之,该js文档不能以被改动!因此这1设定宽度为固定不动640px的将我本来设定随机器设备宽度转变的meta遮盖了!

难题就来了,静态数据网页页面早已进行,且因为历史时间编码要素,有非常一部分的编码在当初并沒有应用rem企业,早已没法大经营规模改动css实际效果了。仅有根据js重设设定viewport宽度再度开展遮盖了......这倒是挺简易的,不过便是编码非常的丑恶罢了。

但又1个难题来了,这个官方网站网页页面还动态性引进了iframe网页页面,这些iframe网页页面是固定不动的640px宽度。这就很奔溃了!我加了随机器设备宽度转变的mata,那末这些iframe就不可以看了;我已不次加meta,那末官方网站自身就不可以看了!

好在这些iframe是根据统1的方式引进,尽管不可以变更引进方式的js文档,但在业务流程编码中再度监视倒也还能够。因此再度这个关联点一下恶性事件,分辨iframe是不是被引进后,便是应用一些独特方式的情况下了!

css3有个transform: scale()的方式,能够对元素开展放缩,尽管真实占位的宽高并沒有转变,但在显示信息实际效果上還是非常好的。

根据测算放缩占比 = 机器设备宽度 / 640 能够得出对应的放缩占比,再对引进的iframe设定transform: scale(放缩占比)便可以完成好看的放缩了!

事儿到这里就完毕了吗?不!都还没!iframe是放缩了,可高宽比也被放缩了,內容显示信息不详细了。这里设定height: 机器设备高宽比 / 放缩占比能够复原本来的iframe高宽比。

认为完毕了?并沒有!也有难题存在!iframe层被scale()特性放缩后,默认设置的向下和向右也挪动了1段间距,这是由于scale()默认设置是按管理中心开展放缩的!这里花了很多時间去找寻适合的方式处理,例如负margin、translate()等,可是因为无法测算适合的挪动占比系数,恕自己优化算法辣鸡,这1方式尝试很久终究决策還是舍弃......

翻看css手册发现了1个熟习又生疏的特性
设定转动元素的基点部位:

transform-origin: x-axis y-axis z-axis;

它有3个特性值,各自意味着界定主视图被置于X、Y、Z轴的何处。

他乡遇故知,久旱逢甘霖!要的便是你啊!设定transform-origin: 0 top 0 处理~

实际上吧,这个特性很早就被用到了,只但是我最初写的是缩写transform-origin: 0,被访问器分析以后的便是transform-origin: 0 center 0......那时候的体会便是上下处理了,1直想的全是把iframe移上去,却不知道人家自带这样的作用,只但是被我忽视了。学习培训還是不可以囫囵吞枣啊,1个特性居然能够消耗半天的時间,我大约并不是个达标的前端开发......(逃

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:根据html5 canvas做批阅工作的小软件 返回下一篇:没有了