LOL前端重构规范

# 范例代码包下载&说明

TIP

提示

提供一些常用的示例代码包，注意根据实际项目修改以下内容：

页面头部meta标签中的描述、关键字，如不清楚，找对应的产品或内部重构同学确认 页面文件、样式文件及脚本文件中的资源分离路径 查看分离路径规范 PTT统计setSite中的相关信息 查看setSite设置 移动端页面需调整分享信息，如不清楚，找对应的产品或内部重构同学确认

# PC单端专题

适用于PC单端的活动专题 目录结构示例：

    a20190509msihero //活动目录
    ├─ ossweb-img //存放图片、视频、音频等资源
      ├─ bg.jpg
      ├─ hreo.mp3
      └─ ...
    ├─ css //存放样式资源
      ├─ index.css
      └─ ...
    ├─ js //存放脚本资源
      ├─ index.js
      └─ ...
    └─ index.html //页面文件

HTML代码示例:

<!DOCTYPE html>
<html>

<head>
  <meta charset="GBK">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="robots" content="all">
  <meta name="author" content="Tencent-CP" />
  <meta name="Copyright" content="Tencent" />
  <meta name="Description" content="英雄联盟官方网站，风靡全球的MOBA竞技网游，全球召唤师热爱集结地。公平竞技英雄对战，全球角逐电竞荣耀，还有神秘的英雄联盟宇宙等你来探索！无限热爱，无限可能！">
  <meta name="Keywords" content="英雄联盟,lol,lol新手礼包,lol攻略,lol视频,lol视频攻略,英雄资料,英雄联盟攻略,明星解说视频,英雄,攻略,WCG,点亮图标,赛事">
  <title>活动标题-英雄联盟官方网站-腾讯游戏</title>
  <link rel="stylesheet" href="css/index.css">
  <!-- 页面设计：cp | 页面制作：cp | 创建：2019-05-10 -->
</head>

<body>
  <!--#include virtual="/inc/tip-lte-ie9.html"-->

  <!-- 页面主体代码 -->

  <script src="//js.aq.qq.com/js/aq_common.js"></script>
  <script src="//game.gtimg.cn/images/js/plugin/report/atReport.js" charset="UTF-8"></script>
  <script>
      //此段代码不能放到外链JS中，
      var setSite={ //设置网站属性 
          siteType:"os", //必填项:"os"代表是官网，如果不是，则填写actName例如a20160701xxx
          pageType:"main", //必填项:本页面的定位；按照页面含义填写例如main||list||detail||download||share||page1||pageN,不支持点(.)、下划线(_)
          project:"base", //选填项:如果是官网模块则是必填;按照模块内容，填写固定的对应值;官网或微社区base;同人站doujin;赛事match;故事站story;文化站history;粉丝站fans;爆料站coming;论坛bbs;皮肤skin;默认other;
          ingame: false,//选填项:默认根据浏览器类型获取是否属于游戏内，因英雄联盟端游客户端特殊性，所以英雄联盟端游客户端需求需要填写true.
          autoClick: false,//是否自动上报按钮&a的点击。选填项：默认false。非必要不开启
          autoAreaStay: false,//是否自动上报dom中填写dt-areaid的区域停留时长。选填项：默认false。非必要不开启
      };
      if(typeof LOL_SEND_DATA_FN_AT == 'function'){
          LOL_SEND_DATA_FN_AT();
      };//千万不能忘记！
  </script>
  <script src="//ossweb-img.qq.com/images/lol/title/lol.js"></script>
  <script src="//game.gtimg.cn/images/js/2018foot/foot.js"></script>
  <script src="//game.gtimg.cn/images/js/milo-next/latest/milo.gbk.min.js"></script>
  <!-- 页面脚本逻辑 -->
</body>

</html>

示例[css/index.css]:

body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form,header,section,article,footer{margin:0;}
body,button,input,select,textarea{font:12px/1.5 tahoma,'\5FAE\8F6F\96C5\9ED1',sans-serif}
h1,h2,h3,h4,h5,h6{font-size:100%}
em,b{font-style:normal}
a{text-decoration:none}
a:hover{text-decoration:underline}
img{border:0}
body{padding-top:42px}
button,input,select,textarea{font-size:100%;outline:none}
table{border-collapse:collapse;border-spacing:0}
td,th,ul,ol{padding:0}
/* reset end */
/* foot */
#afooter {
    position: relative;
    padding: 30px 0;
    text-align: center;
    font: normal 12px/19px Tahoma;
    z-index: 10;
    background-color: #191219;
}
#afooter, #afooter a {
    color: #c0c0c0;
    text-decoration: none;
}

/* 图片分离路径示例 */
/* .bg{background-image: url(//game.gtimg.cn/images/lol/act/a20190510battle/bg.jpg);} */

# 移动单端专题

目录结构示例：

    a20190509msihero //活动目录
    ├─ ossweb-img //存放图片、视频、音频等资源
      ├─ bg.jpg
      ├─ hreo.mp3
      └─ ...
    ├─ css //存放样式资源
      ├─ index.css
      └─ ...
    ├─ js //存放脚本资源
      ├─ index.js
      └─ ...
    └─ index.html //页面文件

以设计稿宽度750px为基准进行适配，举例两种适配方式：

vw + rem 示例[HTML]:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="GBK">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="robots" content="all">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<!-- 为了防止页面数字被识别为电话号码，可根据实际需要添加： -->
		<meta name="format-detection" content="telephone=no">
		<!-- 让添加到主屏幕的网页再次打开时全屏展示，可添加：   -->
		<meta content="yes" name="mobile-web-app-capable">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta name="author" content="Tencent-CP" />
		<meta name="Copyright" content="Tencent" />
		<meta name="Description" content="英雄联盟官方网站，风靡全球的MOBA竞技网游，全球召唤师热爱集结地。公平竞技英雄对战，全球角逐电竞荣耀，还有神秘的英雄联盟宇宙等你来探索！无限热爱，无限可能！">
		<meta name="Keywords" content="英雄联盟,lol,lol新手礼包,lol攻略,lol视频,lol视频攻略,英雄资料,英雄联盟攻略,明星解说视频,英雄,攻略,WCG,点亮图标,赛事">
		<title>活动标题-英雄联盟官方网站-腾讯游戏</title>
		<link rel="stylesheet" href="css/index.css">
		<!-- 页面设计：cp | 页面制作：cp | 创建：2019-05-10 -->
	</head>
	<body>

		<!-- 页面主体代码 -->
		<script src="//js.aq.qq.com/js/aq_common.js"></script>
    <script src="//game.gtimg.cn/images/js/plugin/report/atReport.js" charset="UTF-8"></script>
    <script src="//game.gtimg.cn/images/js/milo-next/latest/milo.gbk.min.js"></script>
    <script src="//ossweb-img.qq.com/images/js/zepto/zepto.min.js"></script>
    <script src="//game.gtimg.cn/images/js/2018foot/foot.js"></script>
		<script src="//pub.idqqimg.com/qqmobile/qqapi.js?_bid=152"></script>
    <script>
    //加载js
		function loadScripts(t,e){function a(){var o=document.createElement("script");o.type="text/javascript";var c=-1==t[n].indexOf("?")?t[n]+"?d="+Math.random():t[n]+"&d="+Math.random();o.src=c,document.body.appendChild(o),n++,o.readyState?o.onreadystatechange=function(){("loaded"==o.readyState||"complete"==o.readyState)&&(o.onreadystatechange=null,d++,d<t.length?a():e&&e())}:o.onload=function(){d++,d<t.length?a():e&&e()}}e=e||function(){};var n=0,d=0;a()}
			if(/(iPhone|iPad|iPod|iOS|Android|Windows Phone|BlackBerry|SymbianOS)/i.test(navigator.userAgent)){
				loadScripts(["//mlol-file.qpic.cn/mobile/mlol/js/mlol.js",],function(){
					mlol.SetShare({
						url: location.href,
						title: "分享标题",
						content: "分享描述",
						thumb_url: "图片地址",
						callback: function (channel) {
							console.log("点击了分享:", channel);
						},
					})
					setTimeout(delayCookie,2000);
					//移动端脚本逻辑
				})
			}else{
				loadScripts(["//ossweb-img.qq.com/images/lol/title/lol.js",],function(){
				setTimeout(delayCookie,2000);
				//PC端脚本逻辑
			})}

        //此段代码不能放到外链JS中，
        var setSite={ //设置网站属性 
            siteType:"os", //必填项:"os"代表是官网，如果不是，则填写actName例如a20160701xxx
            pageType:"main", //必填项:本页面的定位；按照页面含义填写例如main||list||detail||download||share||page1||pageN,不支持点(.)、下划线(_)
            project:"base", //选填项:如果是官网模块则是必填;按照模块内容，填写固定的对应值;官网或微社区base;同人站doujin;赛事match;故事站story;文化站history;粉丝站fans;爆料站coming;论坛bbs;皮肤skin;默认other;
            ingame: false,//选填项:默认根据浏览器类型获取是否属于游戏内，因英雄联盟端游客户端特殊性，所以英雄联盟端游客户端需求需要填写true.
            autoClick: false,//是否自动上报按钮&a的点击。选填项：默认false。非必要不开启
            autoAreaStay: false,//是否自动上报dom中填写dt-areaid的区域停留时长。选填项：默认false。非必要不开启
        };
        if(typeof LOL_SEND_DATA_FN_AT == 'function'){
            LOL_SEND_DATA_FN_AT();
        };//千万不能忘记！
    </script>
		<!-- 页面脚本逻辑 -->
	</body>
</html>

vw + rem 示例[css/index.css]:

/* reset */
html,body,div,p,ul,li,dl,dt,dd,em,i,span,a,img,input,h1,h2,h3,h4,h5 {margin:0;padding:0}
a,img,input {border:none;}
body{font: 14px/1.75  -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;-webkit-tap-highlight-color: rgba(0,0,0,0);}
a {text-decoration:none;}
ul,li{list-style: none}
a, img {-webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单，根据需要选择是否删除 */}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}
/* reset end */
html {
  font-size: 50px;/* 兼容不支持vw的系统 */
  font-size: 13.33333333vw;/* 7.5rem === 100vw */
}

@media (max-width: 1024px) {
  html,body {
    max-width: 1024px;
  }
}

#afooter{background-color: #191219;text-align: center;font-size:.22rem;padding:.2rem 0;}
#afooter, #afooter a{color: #c0c0c0;text-decoration: none;}
/* 图片分离路径示例 */
/* .bg{background-image: url(//game.gtimg.cn/images/lol/act/a20190510battle/bg.jpg);} */

动态生成target-densitydpi值 示例[HTML]:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="GBK">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="robots" content="all">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<!-- 为了防止页面数字被识别为电话号码，可根据实际需要添加： -->
		<meta name="format-detection" content="telephone=no">
		<!-- 让添加到主屏幕的网页再次打开时全屏展示，可添加：   -->
		<meta content="yes" name="mobile-web-app-capable">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta name="author" content="Tencent-CP" />
		<meta name="Copyright" content="Tencent" />
		<meta name="Description" content="英雄联盟官方网站，风靡全球的MOBA竞技网游，全球召唤师热爱集结地。公平竞技英雄对战，全球角逐电竞荣耀，还有神秘的英雄联盟宇宙等你来探索！无限热爱，无限可能！">
		<meta name="Keywords" content="英雄联盟,lol,lol新手礼包,lol攻略,lol视频,lol视频攻略,英雄资料,英雄联盟攻略,明星解说视频,英雄,攻略,WCG,点亮图标,赛事">
		<title>活动标题-英雄联盟官方网站-腾讯游戏</title>
		<link rel="stylesheet" href="css/index.css">
		<!-- 页面设计：cp | 页面制作：cp | 创建：2019-05-10 -->
		<script>
			(function(){
        if (!window.addEventListener) return;
          var html=document.documentElement;
          function setFont()
          {
              function adaptVP(a){function c(){var c,d;return b.uWidth=a.uWidth?a.uWidth:750,b.dWidth=a.dWidth?a.dWidth:window.screen.width||window.screen.availWidth,b.ratio=window.devicePixelRatio?window.devicePixelRatio:1,b.userAgent=navigator.userAgent,b.bConsole=a.bConsole?a.bConsole:!1,a.mode?(b.mode=a.mode,void 0):(c=b.userAgent.match(/Android/i),c&&(b.mode="android-2.2",d=b.userAgent.match(/Android\s(\d+.\d+)/i),d&&(d=parseFloat(d[1])),2.2==d||2.3==d?b.mode="android-2.2":4.4>d?b.mode="android-dpi":d>=4.4&&(b.mode=b.dWidth>b.uWidth?"android-dpi":"android-scale")),void 0)}function d(){var e,f,g,h,c="",d=!1;switch(b.mode){case"apple":f=(window.screen.availWidth*b.ratio/b.uWidth)/b.ratio;c="width="+b.uWidth+",initial-scale="+f+",minimum-scale="+f+",maximum-scale="+f+",user-scalable=no";break;case"android-2.2":a.dWidth||(b.dWidth=2==b.ratio?720:1.5==b.ratio?480:1==b.ratio?375:.75==b.ratio?240:480),e=window.screen.width||window.screen.availWidth,375==e?b.dWidth=b.ratio*e:750>e&&(b.dWidth=e),b.mode="android-dpi",d=!0;case"android-dpi":f=160*b.uWidth/b.dWidth*b.ratio,c="target-densitydpi="+f+", width="+b.uWidth+", user-scalable=no",d&&(b.mode="android-2.2");break;case"android-scale":c="width="+b.uWidth+", user-scalable=no"}g=document.querySelector("meta[name='viewport']")||document.createElement("meta"),g.name="viewport",g.content=c,h=document.getElementsByTagName("head"),h.length>0&&h[0].appendChild(g)}function e(){var a="";for(key in b)a+=key+": "+b[key]+"; ";alert(a)}if(a){var b={uWidth:0,dWidth:0,ratio:1,mode:"apple",userAgent:null,bConsole:!1};c(),d(),b.bConsole&&e()}};adaptVP({uWidth:750});
          }
          window.addEventListener('resize',setFont,false)
          setFont();
			})();
		</script>
	</head>
	<body>

		<!-- 页面主体代码 -->
		<script src="//js.aq.qq.com/js/aq_common.js"></script>
    <script src="//game.gtimg.cn/images/js/plugin/report/atReport.js" charset="UTF-8"></script>
    <script src="//game.gtimg.cn/images/js/milo-next/latest/milo.gbk.min.js"></script>
    <script src="//ossweb-img.qq.com/images/js/zepto/zepto.min.js"></script>
    <script src="//game.gtimg.cn/images/js/2018foot/foot.js"></script>
		<script src="//pub.idqqimg.com/qqmobile/qqapi.js?_bid=152"></script>
    <script>
    //加载js
		function loadScripts(t,e){function a(){var o=document.createElement("script");o.type="text/javascript";var c=-1==t[n].indexOf("?")?t[n]+"?d="+Math.random():t[n]+"&d="+Math.random();o.src=c,document.body.appendChild(o),n++,o.readyState?o.onreadystatechange=function(){("loaded"==o.readyState||"complete"==o.readyState)&&(o.onreadystatechange=null,d++,d<t.length?a():e&&e())}:o.onload=function(){d++,d<t.length?a():e&&e()}}e=e||function(){};var n=0,d=0;a()}
			if(/(iPhone|iPad|iPod|iOS|Android|Windows Phone|BlackBerry|SymbianOS)/i.test(navigator.userAgent)){
				loadScripts(["//mlol-file.qpic.cn/mobile/mlol/js/mlol.js",],function(){
					mlol.SetShare({
						url: location.href,
						title: "分享标题",
						content: "分享描述",
						thumb_url: "图片地址",
						callback: function (channel) {
							console.log("点击了分享:", channel);
						},
					})
					setTimeout(delayCookie,2000);
					//移动端脚本逻辑
				})
			}else{
				loadScripts(["//ossweb-img.qq.com/images/lol/title/lol.js",],function(){
				setTimeout(delayCookie,2000);
				//PC端脚本逻辑
			})}

        //此段代码不能放到外链JS中，
        var setSite={ //设置网站属性 
            siteType:"os", //必填项:"os"代表是官网，如果不是，则填写actName例如a20160701xxx
            pageType:"main", //必填项:本页面的定位；按照页面含义填写例如main||list||detail||download||share||page1||pageN,不支持点(.)、下划线(_)
            project:"base", //选填项:如果是官网模块则是必填;按照模块内容，填写固定的对应值;官网或微社区base;同人站doujin;赛事match;故事站story;文化站history;粉丝站fans;爆料站coming;论坛bbs;皮肤skin;默认other;
            ingame: false,//选填项:默认根据浏览器类型获取是否属于游戏内，因英雄联盟端游客户端特殊性，所以英雄联盟端游客户端需求需要填写true.
            autoClick: false,//是否自动上报按钮&a的点击。选填项：默认false。非必要不开启
            autoAreaStay: false,//是否自动上报dom中填写dt-areaid的区域停留时长。选填项：默认false。非必要不开启
        };
        if(typeof LOL_SEND_DATA_FN_AT == 'function'){
            LOL_SEND_DATA_FN_AT();
        };//千万不能忘记！
    </script>
		<!-- 页面脚本逻辑 -->
	</body>
</html>

动态生成target-densitydpi值 示例[css/index.css]:


/* reset */
html,body,div,p,ul,li,dl,dt,dd,em,i,span,a,img,input,h1,h2,h3,h4,h5 {margin:0;padding:0}
a,img,input {border:none;}
body{font: 14px/1.75  -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;-webkit-tap-highlight-color: rgba(0,0,0,0);}
a {text-decoration:none;}
ul,li{list-style: none}
a, img {-webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单，根据需要选择是否删除 */}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}
/* reset end */

#afooter{background-color: #191219;text-align: center;font-size:22px;padding:20px 0;}
#afooter, #afooter a{color: #c0c0c0;text-decoration: none;}
/* 图片分离路径示例 */
/* .bg{background-image: url(//game.gtimg.cn/images/lol/act/a20190510battle/bg.jpg);} */

# 双端专题

目录结构示例：

     a20190509msihero //活动目录
    ├─ ossweb-img //存放图片、视频、音频等资源
      ├─ bg.jpg
      ├─ hreo.mp3
      └─ ...
    ├─ css //存放样式资源
      ├─ index.css
      └─ ...
    ├─ js //存放脚本资源
      ├─ index.js
      └─ ...
    ├─ m
      └─ index.html //移动端页面文件
    └─ index.html //PC端页面文件

移动端的页面文件放在/m目录下，并且在双端页面头部添加互跳的js判断，需要自动判断跳转，PC访问移动端页面，跳转到对应的PC专题上，反之亦然。 PC端添加：

(function () {
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
        var a = document.referrer,
            b = {"baidu.com": "seo_baidu","sogou.com": "seo_sogou","sm.cn": "seo_sm","so.com": "seo_360","bing.com": "seo_bing","google.com": "seo_google"},
            c;
        for (c in b) {
            if (-1 != a.indexOf(c)) {
                a = b[c];
                if (window.sessionStorage) {
                    sessionStorage.setItem("channel", a)
                } else {
                    var d = d || 0,
                        b = "";
                    0 != d && (b = new Date, b.setTime(b.getTime() + 1000 * d), b = "; expires=" + b.toGMTString());
                    document.cookie = "channel=" + escape(a) + b + "; path=/"
                }
                break
            }
        }
        window.location.href = "/m/" + location.search
    };
})();

TIP

注意 window.location.href 跳转地址 /m/ ，默认为移动端官网地址； 如是专题或其他需求，需要根据实际情况将 /m/ 替换为相对应的移动端地址；

移动端添加：

if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
    window.location.href = "PC端专题地址"+location.search;
}

# 双端适配专题

目录结构示例：

    a20190509msihero //活动目录
    ├─ ossweb-img //存放图片、视频、音频等资源
      ├─ bg.jpg
      ├─ hreo.mp3
      └─ ...
    ├─ css //存放样式资源
      ├─ index.css
      └─ ...
    ├─ js //存放脚本资源
      ├─ index.js
      └─ ...
    └─ index.html //PC端页面文件

以设计稿宽度750px为基准进行适配，举例rem + 动态生成target-densitydpi值的适配方式（移动端）： 示例[HTML]:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="gbk">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="robots" content="all">
		<meta name="author" content="Tencent-CP" />
		<meta name="Copyright" content="Tencent" />
		<meta name="Description" content="英雄联盟官方网站，风靡全球的MOBA竞技网游，全球召唤师热爱集结地。公平竞技英雄对战，全球角逐电竞荣耀，还有神秘的英雄联盟宇宙等你来探索！无限热爱，无限可能！">
		<meta name="Keywords" content="英雄联盟,lol,lol新手礼包,lol攻略,lol视频,lol视频攻略,英雄资料,英雄联盟攻略,明星解说视频,英雄,攻略,WCG,点亮图标,赛事">
		<title>活动标题-英雄联盟官方网站-腾讯游戏</title>
		<link rel="stylesheet" href="css/index.css" media="screen and (min-device-width: 1025px)">
		<link rel="stylesheet" href="css/index-m.css" media="screen and (max-device-width: 1024px)">
		<!--[if lt IE 9]><link rel="stylesheet" href="css/index.css"> <![endif]-->
		<!-- 页面设计：cp | 页面制作：cp | 创建：2019-05-10 -->
		<script>
		//mode  移动端的适配方式 按需 传参  目前只有两种 px和rem
	  (function(win, doc, mode) {
	    var std = 750;
	    if(/(iPhone|iPad|iPod|iOS|Android|Windows Phone|BlackBerry|SymbianOS)/i.test(navigator.userAgent)) {
	      var h = document.getElementsByTagName("head")[0];
	      h.insertAdjacentHTML('beforeEnd', '<meta name="apple-mobile-web-app-capable" content="yes">');
	      h.insertAdjacentHTML('beforeEnd', '<meta name="apple-mobile-web-app-status-bar-style" content="black">');
	      h.insertAdjacentHTML('beforeEnd', '<meta name="format-detection" content="telephone=no">');
	      h.insertAdjacentHTML('beforeEnd', '<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui" />');
	      if(mode == 'px') {
	        if (!win.addEventListener) return;
	          var html=document.documentElement;
	          function setFont()
	          {
	              function adaptVP(a){function c(){var c,d;return b.uWidth=a.uWidth?a.uWidth:750,b.dWidth=a.dWidth?a.dWidth:window.screen.width||window.screen.availWidth,b.ratio=window.devicePixelRatio?window.devicePixelRatio:1,b.userAgent=navigator.userAgent,b.bConsole=a.bConsole?a.bConsole:!1,a.mode?(b.mode=a.mode,void 0):(c=b.userAgent.match(/Android/i),c&&(b.mode="android-2.2",d=b.userAgent.match(/Android\s(\d+.\d+)/i),d&&(d=parseFloat(d[1])),2.2==d||2.3==d?b.mode="android-2.2":4.4>d?b.mode="android-dpi":d>=4.4&&(b.mode=b.dWidth>b.uWidth?"android-dpi":"android-scale")),void 0)}function d(){var e,f,g,h,c="",d=!1;switch(b.mode){case"apple":f=(window.screen.availWidth*b.ratio/b.uWidth)/b.ratio;c="width="+b.uWidth+",initial-scale="+f+",minimum-scale="+f+",maximum-scale="+f+",user-scalable=no";break;case"android-2.2":a.dWidth||(b.dWidth=2==b.ratio?720:1.5==b.ratio?480:1==b.ratio?375:.75==b.ratio?240:480),e=window.screen.width||window.screen.availWidth,375==e?b.dWidth=b.ratio*e:750>e&&(b.dWidth=e),b.mode="android-dpi",d=!0;case"android-dpi":f=160*b.uWidth/b.dWidth*b.ratio,c="target-densitydpi="+f+", width="+b.uWidth+", user-scalable=no",d&&(b.mode="android-2.2");break;case"android-scale":c="width="+b.uWidth+", user-scalable=no"}g=document.querySelector("meta[name='viewport']")||document.createElement("meta"),g.name="viewport",g.content=c,h=document.getElementsByTagName("head"),h.length>0&&h[0].appendChild(g)}function e(){var a="";for(key in b)a+=key+": "+b[key]+"; ";alert(a)}if(a){var b={uWidth:0,dWidth:0,ratio:1,mode:"apple",userAgent:null,bConsole:!1};c(),d(),b.bConsole&&e()}};adaptVP({uWidth:750});
	          }
	          win.addEventListener('resize',setFont,false)
	          setFont();
	      }
	      else if(mode == 'rem') {
	        var docEl = doc.documentElement,
	          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	          recalc = function() {
	            var clientWidth = docEl.clientWidth;
	            if(!clientWidth) return;
	            docEl.style.fontSize = 100 * (clientWidth / std) + 'px';
	          };
	        if(!doc.addEventListener) return;
	        recalc();
	        win.addEventListener(resizeEvt, recalc, false);
	        doc.addEventListener('DOMContentLoaded', recalc, false);
	      }
	    }
	  })(window, document, 'px');
		</script>
	</head>
	<body>
		<!--#include virtual="/inc/tip-lte-ie9.html"-->
		<div class="wrap">
			页面DOM代码
		</div>	
		<!-- 页面主体代码 -->
		<script src="//js.aq.qq.com/js/aq_common.js"></script>
		<script src="//game.gtimg.cn/images/js/milo-next/latest/milo.gbk.min.js"></script>
		<script src="//game.gtimg.cn/images/js/2018foot/foot.js"></script>
		<script src="//game.gtimg.cn/images/js/plugin/report/atReport.js" charset="UTF-8"></script>
		<script>
		function delayCookie(){
			var cookieUin = Milo.get('uin', '');
			if (cookieUin) {
					Milo.set('uin_cookie', cookieUin, 365 * 24 * 60 * 60, 'qq.com', '/', false);
					Milo.set('ied_qq', cookieUin, 365 * 24 * 60 * 60, 'qq.com', '/', false);
			}
		}
		//加载js
		function loadScripts(t,e){function a(){var o=document.createElement("script");o.type="text/javascript";var c=-1==t[n].indexOf("?")?t[n]+"?d="+Math.random():t[n]+"&d="+Math.random();o.src=c,document.body.appendChild(o),n++,o.readyState?o.onreadystatechange=function(){("loaded"==o.readyState||"complete"==o.readyState)&&(o.onreadystatechange=null,d++,d<t.length?a():e&&e())}:o.onload=function(){d++,d<t.length?a():e&&e()}}e=e||function(){};var n=0,d=0;a()}
			if(/(iPhone|iPad|iPod|iOS|Android|Windows Phone|BlackBerry|SymbianOS)/i.test(navigator.userAgent)){
				loadScripts(["//mlol-file.qpic.cn/mobile/mlol/js/mlol.js",],function(){
					mlol.SetShare({
						url: location.href,
						title: "分享标题",
						content: "分享描述",
						thumb_url: "图片地址",
						callback: function (channel) {
							console.log("点击了分享:", channel);
						},
					})
					setTimeout(delayCookie,2000);
					//移动端脚本逻辑
				})
			}else{
				loadScripts(["//ossweb-img.qq.com/images/lol/title/lol.js",],function(){
				setTimeout(delayCookie,2000);
				//PC端脚本逻辑
			})}

			//此段代码不能放到外链JS中，
			var setSite={ //设置网站属性 
				siteType:"os", //必填项:"os"代表是官网，如果不是，则填写actName例如a20160701xxx
				pageType:"main", //必填项:本页面的定位；按照页面含义填写例如main||list||detail||download||share||page1||pageN,不支持点(.)、下划线(_)
				project:"base", //选填项:如果是官网模块则是必填;按照模块内容，填写固定的对应值;官网或微社区base;同人站doujin;赛事match;故事站story;文化站history;粉丝站fans;爆料站coming;论坛bbs;皮肤skin;默认other;
				ingame: false,//选填项:默认根据浏览器类型获取是否属于游戏内，因英雄联盟端游客户端特殊性，所以英雄联盟端游客户端需求需要填写true.
				autoClick: false,//是否自动上报按钮&a的点击。选填项：默认false。非必要不开启
				autoAreaStay: false,//是否自动上报dom中填写dt-areaid的区域停留时长。选填项：默认false。非必要不开启
			};
			if(typeof LOL_SEND_DATA_FN_AT == 'function'){
				LOL_SEND_DATA_FN_AT();
			};//千万不能忘记！
		</script>
	</body>
</html>

示例[css/index.css]

body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form,header,section,article,footer{margin:0;}
body,button,input,select,textarea{font:12px/1.5 tahoma,'\5FAE\8F6F\96C5\9ED1',sans-serif}
h1,h2,h3,h4,h5,h6{font-size:100%}
em,b{font-style:normal}
a{text-decoration:none}
a:hover{text-decoration:underline}
img{border:0}
body{padding-top:42px}
button,input,select,textarea{font-size:100%;outline:none}
table{border-collapse:collapse;border-spacing:0}
td,th,ul,ol{padding:0}
/* reset end */
/* foot */
#afooter {
    position: relative;
    padding: 30px 0;
    text-align: center;
    font: normal 12px/19px Tahoma;
    z-index: 10;
    background-color: #191219;
}
#afooter, #afooter a {
    color: #c0c0c0;
    text-decoration: none;
}

/* 图片分离路径示例 */
/* .bg{background-image: url(//game.gtimg.cn/images/lol/act/a20190510battle/bg.jpg);} */

示例[css/index-m.css]

/* reset */
html,body,div,p,ul,li,dl,dt,dd,em,i,span,a,img,input,h1,h2,h3,h4,h5 {margin:0;padding:0}
a,img,input {border:none;}
body{font: 14px/1.75  -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;-webkit-tap-highlight-color: rgba(0,0,0,0);}
a {text-decoration:none;}
ul,li{list-style: none}
a, img {-webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单，根据需要选择是否删除 */}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}
/* reset end */
html {
  font-size: 50px;/* 兼容不支持vw的系统 */
  font-size: 13.33333333vw;/* 7.5rem === 100vw */
}

@media (max-width: 1024px) {
  html,body {
    max-width: 1024px;
  }
}

#afooter{background-color: #191219;text-align: center;font-size:.22rem;padding:.2rem 0;}
#afooter, #afooter a{color: #c0c0c0;text-decoration: none;}
/* 图片分离路径示例 */
/* .bg{background-image: url(//game.gtimg.cn/images/lol/act/a20190510battle/bg.jpg);} */

← 前端相关SDK →