跨域iframe导致meta标签失效的解决方案
在iframe嵌套页面时，子页面meta标签（例如viewport）设置常常失效，尤其在跨域情况下。本文通过一个案例分析，探讨如何解决此问题。
问题：
一个跨域iframe的子页面设置了meta viewport="width=750, user-scalable=no"，但实际显示受父页面影响，页面样式错乱。由于跨域限制，无法修改父页面设置。
原因分析：
iframe的viewport继承机制导致此问题。如果父页面也设置了viewport，且子页面与父页面跨域，子页面的viewport设置会被父页面覆盖。使用px作为页面单位，则不同视窗宽度下页面显示错乱。
解决方案：
最佳方案并非强制子页面viewport生效，而是调整子页面布局方式。建议放弃px单位，改用rem或vw。rem基于根元素字体大小，vw基于视口宽度。使用rem或vw，页面元素尺寸会根据视口宽度自动调整，即使iframe宽度变化，页面也能保持正确比例和布局，避免父页面viewport的影响。 即使iframe的viewport设置与子页面不同，页面也能正确显示。
