iframe在移动端的缩放的⽰例代码
⼯作中碰到个奇怪的问题，折腾了⼤半天，终于算是解决了，这⾥把分析思路和解决办法记录下。
项⽬是做响应式的公司官⽹，前期的静态图页⾯切完后就提交给后台作为模板使⽤了，我也就基本退出项⽬。
在后端落地时发现在在移动端页⾯显⽰不太对劲，显得很模糊。第⼀想法是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">
这⼀头部是被⼀段不得不被加⼊的js⽂件所append进⼊的，⽽且被明确告知，该js⽂件不可以被修改！所以这⼀设置宽度为固定640px的将我原本设置随设备宽度变化的meta覆盖了！
问题就来了，静态页⾯已经完成，且由于历史代码因素，有相当部分的代码在当初并没有使⽤rem单位，已经⽆法⼤规模修改css效果了。只有通过js重置设置viewport宽度再次进⾏覆盖了......这倒是挺简单的，⽆⾮就是代码相当的丑陋⽽已。
但⼜⼀个问题来了，这个官⽹页⾯还动态引⼊了iframe页⾯，这些iframe页⾯是固定的640px宽度。这就很崩溃了！我加了随设备宽度变化的mata，那么这些iframe就不能看了；我不再次加meta，那么官⽹本⾝就不能看了！
好在这些iframe是通过统⼀的⽅法引⼊，虽然不能更改引⼊⽅法的js⽂件，但在业务代码中再次监听倒也还可以。所以再次这个绑定点击事件，判断iframe是否被引⼊后，就是使⽤某些特殊⽅法的时候了！
css3有个transform: scale()的⽅法，可以对元素进⾏缩放，虽然真正占位的宽⾼并没有变化，但在显⽰效果上还是不错的。
通过计算缩放⽐例 = 设备宽度 / 640 可以得出对应的缩放⽐例，再对引⼊的iframe设置transform: scale(缩放⽐例)就可以实现漂亮的缩放了！
事情到这⾥就结束了吗？不！还没有！iframe是缩放了，可⾼度也被缩放了，内容显⽰不完整了。这⾥设置height: 设备⾼度 / 缩放⽐例可以还原原本的iframe⾼度。
以为结束了？并没有！还有问题存在！iframe层被scale()属性缩放后，默认的向下和向右也移动了⼀段距离，这是因为scale()默认是按中⼼进⾏缩放的！这⾥花了⼤量时间去寻合适的⽅法解决，⽐如负margin、translate()等，但是由于难以计算合适的移动⽐例系数，恕本⼈算法辣鸡，这⼀⽅法尝试很久终于决定还是放弃......
翻看css⼿册发现了⼀个熟悉⼜陌⽣的属性
设置旋转元素的基点位置：
transform-origin: x-axis y-axis z-axis;
它有3个属性值，分别代表定义视图被置于X、Y、Z轴的何处。
他乡遇故知，久旱逢⽢霖！要的就是你啊！设置transform-origin: 0 top 0解决~
其实吧，这个属性很早就被⽤到了，只不过我最开始写的是缩写transform-origin: 0，被浏览器解析之后的就是transform-origin: 0 当时的感受就是左右解决了，⼀直想的都是把iframe移上去，殊不知⼈家⾃带这样的功能，只不过被我忽略了。学
习还是不能囫囵吞枣啊，⼀个属性竟然可以浪费半天的时间，我⼤概不是个合格的前端......（逃
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。