<!DOCTYPE html>
<html>
<head>
<title>metahandler.js——移动端适配各种屏幕无痛工具脚本</title>
<meta charset="utf-8" />
<meta content="target-densitydpi=device-dpi,width=750" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<meta name="x5-cache" content="enable" />
<meta name="babel-service:page-status" content="success:200">
<meta name="babel-service:channel" content="wq">
<script type="text/javascript" src="/wxshopTest/js/metahandler.js"></script>
<style>
body {
/*设置跟psd一样的宽度*/
width: 750px;
margin: 0 auto;
background-color: #f0eff4;
}
</style>
</head>
<body class="page">
<p>metahandler.js——移动端适配各种屏幕无痛工具脚本</p>
具体使用步骤 想实现这个功能，其实并不难，几个简单的步骤就能够搞定。我们一起来看一下： 1、按照PSD图的实际宽度，使用像素单位进行页面的基本书写（和写PC端页面一样啦）。在页面顶部添加meta，设置视口信息，将width设置为PSD图的实际宽度（即制作页面时的实际宽度）。但是不需要设置缩放值。demo如下：
<pre class="prism-token token language-js"><span class="token operator"><</span>meta content<span class="token operator">=</span><span class="token string">"target-densitydpi=device-dpi,width=1080"</span> name<span class="token operator">=</span><span class="token string">"viewport"</span><span class="token operator">></span></pre> 2、修改MetaHandler.js文件的最后配置代码。在执行fixViewportWidth函数时，传入相应的像素值作为参数即可。 // HTML5友情提示 —— 调用自适应屏幕的功能函数 opt.fixViewportWidth(1080);
<script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js"></script>
<script>
// init vConsole
var vConsole = new VConsole();
console.log('Hello world');
</script>
</body>
</html>