zhidong 2020-01-27 18:37:34

活动专题:

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

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

静态专题:

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

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

 <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"-->

  • 页面头部引入报错日志上报代码

    活动:<script src="//www.changyou.com/cyouFile/loger/huodong.js"></script>

    官网:<script src="//www.changyou.com/cyouFile/loger/guanwang.js"></script>

专题、活动中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";
}

默认不使用vue、webpack等框架,基于jquery重构开发即可。