zhidong 2020-01-27 18:37:34

说明:

活动专题:专题需要有后端数据对接调用数据展示、抽奖、登录等交互。

示例:svn://gitee.com/amswait/cyou/source/demo/activity-ui

静态专题:专题纯做展示,后面不需要进一步与后端开发交互调用。

示例:svn://gitee.com/amswait/cyou/source/demo/event.changyou.com
注:如果只有pc端,设置viewport在m端也能正常访问,布局不会错乱。

 <meta name="viewport" content="width=1500,minimum-scale=0,maximum-scale=5,user-scalable=yes"/>  

官网:游戏官网项目,一般是静态网站,没有后端开发交互,偶尔有个可以跨域的预约功能。

示例:svn://gitee.com/amswait/cyou/source/demo/ldjsy
注:svn检出需要用gitee帐号,可以根据需要自动检出对应项目目录
汇总目录:https://gitee.com/amswait/cyou/tree/master/source/demo

include  方式引用碎片一般可以用nginx服务器、apache服务等

<!--#include virtual="/inc/dma.html"-->

移动端必须加此样式,防止浏览器自动调整字体影响布局

-webkit-text-size-adjust: none;

通用规则

一般禁止使用字体文件(ttf/eof/svg/eot)(如需使用请联系需求方和技术同学确认) 

检查专题文件包大小,如果超过10M看下专题是否包含了视频、mp3等大文件。
一般mp4、mp3文件有我们技术同学上传后反馈地址进行调用或者使用搜狐h5播放方式,mp3压缩品质一般64k;
    视频:mp4一般按720p品质电影压缩
    1.(大小M/时长s)<1M/s,保证清晰度情况下尽量压缩
    2.一般视频宽度640px小于1024px
    3.一般mp4格式 h264编码

一般单张图片不超过300k,png图片必须压缩(https://tinypng.com/),jpg图片一般60品质,如果要求清晰度高可以调高些。  

pc端页面header需要引入 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

活动或者专题images文件中小图icon,尽量合成一张图减少请求。无用的图片及时删除,交包前务必将图片压缩一遍,特别是弹框、首页、分享页的背景图。

活动css文件为减小资源最终格式化为横向排列。
选择器 { display:none; background-color: #474747; border: 10px solid #474747; height: 390px; width: 640px;} 

统计代码引入方式:
官网: <!--#include virtual="/inc/dma.html"-->
活动:  <!--#include virtual="/all/dma/dma_activity.html"-->
专题:<!--#include virtual="/all/dma/dma_static.html"-->

图片压缩:https://tinypng.com/{:target=”_blank”}

专题、活动中pc端和m端互跳(双端同时存在)

// pc端跳转m端
(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/index.shtml" + location.search };
})();

// m端跳转pc端
if (! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    window.location.href = "../pc/index.shtml";
}