Vue H5项目如何在PC端时布局居中展示，而不全屏拉伸

1、场景再现：在PC端时 H5项目布局被拉伸

2、代码实现

在App.vue中的写入，Vue2 的在mounted中写入，Vue3的写在onMounted写入。

逻辑讲解：
1、获取当前用户的终端类型，再创建一个存有多个H5不同终端的类型。
2、如果H5终端数组中的每个元素不属于当前PC终端。
3、为了让页面永远只保存一个iframe框架，如果存在则删除，不存在就创建。
3、那么创建iframe内联框架为iframe框架设置href跳转.
4、创建一个iframe的样式对象，并用对象遍历属性的方式 将所有属性逐一设置到iframe的style中。
5、最后将新增的iframe插入到document.body中。

 			// 以vue2为例
 			mounted(){
					//为pc则用iframe把移动端页面显示到页面中间
				let userAgentInfo = window.navigator.userAgent
				let Agents = new Array('Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod')
				//pc
				if (!Agents.some(item => userAgentInfo.toLowerCase().includes(item.toLowerCase())) && !(self.frameElement && self.frameElement.tagName == 'IFRAME')) {
					// 检查页面是否已经有iframe   这个判断让页面拥有只保留一个iframe
					let ifrTag = document.getElementsByTagName('iframe')[0]
					if (ifrTag) {
						// 如果有，则删除它
						ifrTag.remove()
					} else {
						let ifrTag = document.createElement('iframe')
						document.body.innerHTML = ''
						ifrTag.setAttribute('src', window.location.href)
						let styleObj = {
							width: '480px',
							height: '920px',
							position: 'absolute',
							left: '50%',
							transform: 'translateX(-50%)',
						}
						Object.entries(styleObj).forEach(([key, value]: [any, string]) => {
							ifrTag.style[key] = value
						})
						document.body.append(ifrTag)
					}
				}
			}

写完保存后到PC端刷新网页看效果即可。
其实React、Angular也是可以写入的，因为这段代码是用原生JS写的。

3、最终效果图

4、疑惑

那我H5原本的布局会不会被影响到？
答案：不会的，丝毫不影响到H5，上面代码只针对PC端。