跨域iframe嵌套导致子页面meta标签失效的解决方案
在跨域iframe框架中，子页面meta标签（特别是viewport）常常失效，导致页面样式错乱。本文提供解决方法，确保子页面meta标签独立生效。
问题：
假设子页面嵌入iframe，且与父页面非同源。子页面使用meta标签设置viewport为750像素：
页面基于750像素设计稿。然而，实际运行中，子页面viewport受父页面影响，750像素设置失效，页面样式错乱。由于跨域限制，无法修改父页面viewport。
解决方案：
问题根源在于子页面使用px作为布局单位，而px高度依赖viewport宽度。当iframe viewport宽度受父页面影响时，px布局就会错位。 解决方法是避免使用px，改用rem或vw作为布局单位。
rem和vw是相对单位：rem相对于根元素字体大小；vw相对于视窗宽度。使用rem或vw，页面在不同viewport宽度下能保持相对一致的比例，避免因父页面viewport设置导致的样式错乱。 将设计稿中的px转换为rem或vw，确保子页面在任何viewport宽度下都能正确显示。即使父页面viewport设置不同，子页面布局也能根据自身viewport适配，从而解决meta标签失效问题。
