使用 uni-app开发 H5平台项目在电脑浏览器中因浏览器分辨率问题会导致 rpx 单位元素尺寸过大，很是影响美观。

本篇文章小编教大家一下简单实用的解决方案

#1 创建一个电脑浏览器中专用的容器html文件pc.html，参考源码如下：

<!DOCTYPE html>
<html lang=zh-CN>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
        <title>uniapp-extend</title>
        <meta name="Copyright" content="helang">
        <link rel="shortcut icon" type="image/png" href="/uniapp-extend/static/logo.png">
        <meta name="keywords" content="黄河爱浪,WEB前端河浪,jQuery插件开发者河浪">
        <meta name="description" content="公众号:web-7258,QQ:1846492969,邮箱:[email protected]">
        <style type="text/css">
            body{
                margin: 0;
                background-color: #f3f3f3;
            }
            iframe{
                width: 375px;
                height: 667px;
                background-color: #fff;
                box-sizing: content-box;
                border: none;
            }
			
            @media screen and (min-width: 450px) {
                iframe {
                    position: fixed;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    margin: auto;
                    border: rgba(0,0,0,0.7) solid 10px;
                    border-radius: 4px;
                }
            }
        </style>
        <script type="text/javascript">
            window.isPC = true;
			
            /* 窗口宽度 小于或等于420px 时，跳转回H5页面 */
            if(window.innerWidth <= 420){
                window.location.pathname = '/uniapp-extend';
            }
        </script>
	</head>
	<body>
		<iframe src="/uniapp-extend"></iframe>
	</body>
</html>

#2 在uni-app项目的 App.vue 文件中的 onLaunch 函数中写下如下代码：

uni.getSystemInfo({
    success(e){
        /* 窗口宽度 大于420px且不在PC页面时，跳转至PC页面 */
        if(e.windowWidth>420 && !window.top.isPC){
            window.location.pathname = '/uniapp-extend/static/html/pc.html';
        }
    }
})