iframe嵌套页面缩放,iframe内容自适应缩放

　　工作中遇到一个奇怪的问题，折腾了半天终于解决了。在这里，我将分析思路和解决方法记录下来。

　　官网，一家反应迅速的公司，负责了这个项目。前期的静态图片页面被剪切后，提交到后台作为模板使用，所以我基本退出了这个项目。

　　后端登陆的时候发现移动端的页面显示不太对，看起来很模糊。第一个想法是meta的头被覆盖了，看源代码的时候发现被覆盖了。

　　这是我习惯的meta header，让页面宽度根据设备宽度自适应变化。

　　Meta= viewport content= width=device-width，initial-scale=1，minimum-scale=1.0，maximum-scale=1.0，user-scalable=no /但是后端登陆框架是直接根据模板引入的，一些公共资源甚至包含了设置viewport的meta。后端是这样介绍的：

　　 meta= viewport id= viewport content= width=640 px，user-scalable=no 这个头是由一个必须添加的js文件追加的，并且明确告知js文件不能修改！所以这个固定宽度640px的设置涵盖了我原来的设置随设备宽度变化的meta！

　　问题是静态页面已经完成，而且由于历史代码因素，相当一部分代码一开始没有使用rem单位，所以不可能大规模修改css效果。只有视窗的宽度被js重新设置以再次覆盖它.很简单，但是代码很难看。

　　但是另一个问题也来了。这个官网页面还动态介绍了iframe页面，宽度固定为640px。真的是崩溃了！我添加了随设备宽度变化的mata，所以这些iframe是看不到的；如果我再不加meta，那官网本身就看不下去了！

　　幸运的是，这些iframe是通过统一的方法引入的。虽然介绍的方法的js文件不能改，但是在业务代码中再监控一次也是可以的。所以是时候在这个绑定click事件之后再用一些特殊的方法，判断是否引入了iframe了！

　　Css3有一个transform: scale()方法，可以缩放元素。虽然真实空间的宽度和高度没有变化，但在显示效果上还是不错的。

　　通过计算缩放比例=设备宽度/640，可以得到相应的缩放比例，然后为导入的iframe设置transform: scale，实现漂亮的缩放！

　　事情就这样结束了吗？不要！还没有！iframe缩放了，但是高度也缩放了，内容显示不完整。在这里设置高度：设备高度/缩放比例可以恢复原来的iframe高度。

　　以为就完了？不要！还是有问题！在iframe层被scale()属性缩放后，默认的向下和向右也移动了一段距离。这是因为scale()默认是以中心为单位缩放的！我花了很多时间才找到合适的解决方案，比如负边距，translate()等。但是因为很难计算出合适的移动比例系数，恐怕我尝试了很久这个方法，最后决定放弃。

　　翻看css手册，发现一个熟悉又陌生的属性。

　　设置旋转元素的基点位置：

　　变换-原点：x轴y轴z轴；它有三个属性值，分别代表定义视图在X、Y和Z轴上的位置。

　　他乡遇故知，久旱逢甘霖！我要你！设置transform-origin: 0 top 0求解~

　　其实这个属性用了很久了。只是我先写了缩写transform-origin: 0，浏览器解析后是transform-origin: 0 center 0.当时感觉是左解决右解决。我想过的只是把iframe上移，却不知道人家有这样的功能，只是忽略了。学习还是咽不下。一个属性可以浪费半天时间。我大概不是一个合格的前端.(逃避

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。