spa viewprot 下h5页面如何在pc端正确展示?

/*
* @Author           trsoliu/trsoliu@gmail.com
* @Contact          wechat:trsoliu
* @Date             2022-09-26
* @LastEditTime:    2022-09-26 14:50:00
* @Description      spa viewprot 下h5页面如何在pc端正确展示?
* @Link             https://juejin.cn/post/7147578648021696520/
*/

前言

• viewprot是当下流行的web移动端适配方案，介于很多项目在pc仍有打开的可能，项目又无pc端开发需求，此时就要求在pc端打开链接后可以正常访问，页面没有剧烈的拉伸。
• 在viewport之前，我们在rem、em等前端适配方案下，通过页面媒体查询来控制页面窗口盒子的宽度和高度来实现，但介于rem、em等前端适配方案本身的缺点，方案依旧不够灵活和完美。
• viewport web移动端适配方案很好的解决了rem、em等问题，但是对于pc适配效果很不好，原因是viewport是基于浏览器窗口的宽度和高度来适配。

方案

通过nginx或者前端代码控制，在入口文件index.html文件中植入iframe来解决窗口问题，不改动项目内部代码（参考上图）。

有建议或问题可以加群qq交流535798405,github:github.com/trsoliu