移动端专题

专题创建

  • 专题命名
    专题文件夹的命名为：a+年月日+专题英文或拼音小写简写，如：a20180412test

  • 文件命名
    html首页文件必须命名为"index"，文件名禁止特殊字符比如空格、$等。统一使用英文单词或拼音缩写，必须小写。

页面TDK、Meta

页面布局

  • 页面布局
    使用rem进行页面布局，计算fontsize的JS脚本放置在头部的style之前。

页面内容

  • CSS
    css、class、id都需小写且书写合法，禁止特殊字符

  • 页面注释
    添加页面制作注释信息(<!-- 页面设计：cp | 页面制作：cp | 创建：2017-09-09 -->)

  • 页面跳转
    如为双端页面，需要自动判断跳转，如PC访问移动端页面，跳转到对应的PC专题上，反之亦然

  • CSS-reset
    使用reset样式，默认字体设置为：font-family:system, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif

  • HTML标签
    标签必须合法且闭合、嵌套正确，标签名均为小写，无语法错误

  • 链接
    页面A标签需要添加链接地址，并能正常打开，无地址时候添加javascript:alert('敬请期待！')

  • https协议
    分离后的页面链接、图片链接、静态资源等去掉http:使用//自适应。

  • 公共文件
    多个页面提取公用代码片段，页面使用include载入

  • CDN地址
    JS、CSS等公用静态资源，如zepto，统一使用腾讯的CDN地址。禁止添加其他非QQ域名下的资源

  • foot.js
    引用公用组件foot.js

图片规范

  • 图片标签
    图片标签必须写上宽度、高度和alt属。宽高为图片的原大小，alt不能为无意义字符，需要能表现出图片的含义，如图片为道具图，则应该为道具的名称。

  • 图片优化
    使用80%质量压缩，图片体积不能超过300K，图片格式包括.jpg/.gif/.png，JPG必须使用渐进式图片格式

  • 合理切图
    道具图片、头像、奖品，必须单独切割出来，装饰性图片合并成精灵图，减少页面请求

  • 图片分离
    页面正确添加分离地址，示例：//game.gtimg.cn/images/项目名称/cp/专题名称/bg.jpg

数据上报

  • 统计代码
    页面正确添加统计代码（统计代码是重要的一环，务必认真阅读）

  • 按钮上报
    页面所有按钮、链接添加PTTSendClick数据上报（按钮上报是重要的一环，务必认真阅读）

兼容处理

  • 兼容
    兼容安卓4.4及以上、iOS最新版本下的微信、手Q、UC、QQ浏览器，如果是游戏APP内置页面，必须兼容游戏对应内置的MSDK浏览器。

  • 音频/视频
    为了音频/视频可以在不同设备表现更好，请参阅。

  • 分享
    引用公用分享组件，按需求合理填充页面的分享信息，标题不超过20个字符，描述不超过100个字符。分享图标的地址协议使用https，图片尺寸为200*200

内容检查

其他

  • 视频压缩
    页面video视频使用非腾讯视频时，参照规范进行视频压缩。

  • 翻屏页面
    需求为翻屏页面时，使用公用组件，并且在每一屏翻动设置数据上报。

results matching ""

    No results matching ""