移动端自适应JS方法 

 1 (function () {
 2     var docEl = document.documentElement,
 3         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
 4         recalc = function () {
 5             var clientWidth = docEl.clientWidth;
 6             //这里是假设在640px宽度设计稿的情况下，1rem = 20px；可以根据实际需要修改
 7             docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
 8         };
 9     recalc();
10     if (!document.addEventListener) return;
11     window.addEventListener(resizeEvt, recalc, false);
12 })();
Resize.js

 

 

页面引用

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>@ViewBag.Title</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <!-- 声明文档使用的字符编码 -->
 8     <meta charset='utf-8'>
 9     <!-- 优先使用 IE 最新版本和 Chrome -->
10     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
11     <!-- 页面描述 -->
12     <meta name="description" content="不超过150个字符" />
13     <!-- 页面关键词 -->
14     <meta name="keywords" content="" />
15     <!-- 网页作者 -->
16     <meta name="author" content="name, email@gmail.com" />
17     <!-- 搜索引擎抓取 -->
18     <meta name="robots" content="index,follow" />
19     <!-- 为移动设备添加 viewport -->
20     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
21     @*<meta name="viewport" content="initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5,user-scalable=no,minimal-ui" />*@
22     <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
23     <!-- iOS 设备 begin -->
24     <meta name="apple-mobile-web-app-title" content="标题">
25     <!-- 添加到主屏后的标题（iOS 6 新增） -->
26     <meta name="apple-mobile-web-app-capable" content="yes" />
27     <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
28 
29     <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
30     <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
31     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
32     <!-- 设置苹果工具栏颜色 -->
33     <meta name="format-detection" content="telephone=no" />
34 
35     <link rel="stylesheet" href="~/static/css/app.css">
36     @*<script src="https://unpkg.com/axios@0.19.0/dist/axios.min.js"></script>*@
37     <script src="~/Scripts/lz-string.min.js"></script>
38     <script src="~/static/js/axios.min.js"></script>
39     <script src="~/static/js/qs.js"></script>
40     <script src="~/static/js/resize.js"></script>
41     <script src="https://unpkg.com/vue/dist/vue.js"></script>
42     <script src="~/Scripts/vue.config.js"></script>
43 </head>
44 <body>
45     @RenderBody()
46     @RenderSection("scripts", required: false)
47 </body>
48 </html>
HTML代码

 

posted @ 2019-10-21 20:12  崔国亮  阅读(266)  评论(0)    收藏  举报