淘宝移动端开发规范

字体设置

使用无衬线字体

body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; }

基础交互

设置全局的CSS样式，避免图中的长按弹出菜单与选中文本的行为

a, img { -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */ }

html, body { -webkit-user-select: none; /* 禁止选中文本（如无文本选中需求，此为必选项） */ user-select: none; }

移动性能

要考虑Android低端机与2G网络场景下性能注意！

发布前必要检查项

所有图片必须有进行过压缩
考虑适度的有损压缩，如转化为80%质量的jpg图片
考虑把大图切成多张小图，常见在banner图过大的场景

加载性能优化, 达到打开足够快

数据离线化，考虑将数据缓存在 localStorage
初始请求资源数 < 4 注意！
图片使用CSS Sprites 或 DataURI
外链 CSS 中避免 @import 引入
考虑内嵌小型的静态资源内容
初始请求资源gzip后总体积 < 50kb
静态资源(HTML/CSS/JS/Image)是否优化压缩？
避免打包大型类库
确保接入层已开启Gzip压缩（考虑提升Gzip级别，使用CPU开销换取加载时间）注意！
尽量使用CSS3代替图片
初始首屏之外的静态资源（JS/CSS）延迟加载注意！
初始首屏之外的图片资源按需加载（判断可视区域）注意！
单页面应用(SPA)考虑延迟加载非首屏业务模块
开启Keep-Alive链路复用

运行性能优化, 达到操作足够流畅

避免 iOS 300+ms 点击延时问题注意！
缓存 DOM 选择与计算
避免触发页面重绘的操作
Debounce连续触发的事件(scroll / resize / touchmove等)，避免高频繁触发执行注意！
尽可能使用事件代理，避免批量绑定事件
使用CSS3动画代替JS动画
避免在低端机上使用大量CSS3渐变阴影效果，可考虑降级效果来提升流畅度
HTML结构层级保持足够简单
尽能少的使用CSS高级选择器与通配选择器
Keep it simple

在线性能检测评定工具使用指南

访问 Google PageSpeed 在线评定网站
在地址栏输入目标URL地址，点击分析按钮开始检测
按 PageSpeed 分析出的建议进行优化，优先解决红色类别的问题

常见Hack(不断更新...)

1.修改和去除移动端点击事件出现的背景框

-webkit-tap-highlight-color: rgba(240,240,240,0.7); //透明色为：rgba(0,0,0,0)

2.选中中文字的背景色

::selection { background:#FFF; color:#333; } 
::-moz-selection { background:#FFF; color:#333; } 
::-webkit-selection { background:#FFF; color:#333;}

3.如何禁止手机浏览器、微信浏览器的上下滑动露出黑色块问题

<script type='text/javascript'> 
document.querySelector('body').addEventListener('touchstart', function (ev) { event.preventDefault(); 
}); 
</script>

4.淘宝无线Web概述地址

5.移动端viewport

width=750, target-densitydpi=high-dpi，minimum-scale=1.0, maximum-scale=2.0, user-scalable=0 //固定宽度，省事 width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui //百分比

6.动态设置页面html，Font-size的值，方便使用rem

//为页面html动态设置font-size值 
(function (doc, win) {
  var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { 
    var clientWidth = docEl.clientWidth; 
    if (!clientWidth) return; 
    docEl.style.fontSize = clientWidth / 7.5 + 'px'; //等价于clientWidth / 750 * 100 + 'px'; 
  }; 
  if (!doc.addEventListener) return; 
  win.addEventListener(resizeEvt, recalc, false);//resize                     
  doc.addEventListener('DOMContentLoaded', recalc, false);//reload 
})
(document, window);

7.定义浏览器点击行为：

<a href="tel:020-10086">打电话给:020-10086</a> 
<a href="sms:10086">发短信给: 10086</a> 
<a href="mailto:[email protected]">发送邮件: [email protected]</a> 
<meta name="format-detection" content="telephone=no"/>

content 里面的参数：telephone=no 是禁止浏览器自动识别手机号码，email=no 是禁止浏览器自动识别Email。

8.自定义苹果图标

在网站文件根目录放一个 apple-touch-icon.png 文件，苹果设备保存网站为书签或桌面快捷方式时，就会使用这个文件作为图标，文件尺寸建议为：180px × 180px。

9.css

body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; /*使用无衬线字体*/ } 
a, img { -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/ } 
html, body { -webkit-user-select: none; /*禁止选中文本*/ user-select: none; } button,input,optgroup,select,textarea { -webkit-appearance:none; /*去掉webkit默认的表单样式*/ } 
a,button,input,optgroup,select,textarea { -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/ } 
input::-webkit-input-placeholder { color:#ccc; /*修改webkit中input的planceholder样式*/ } input:focus::-webkit-input-placeholder { color:#f00; /*修改webkit中focus状态下input的planceholder样式*/ } 
body { -webkit-text-size-adjust: 100%!important; /*禁止IOS调整字体大小*/ } 
input::-webkit-input-speech-button { display: none; /*隐藏Android的语音输入按钮*/ }

10.media query

@media screen and (max-width: 600px) { //你的样式放在这里.... }
@media screen and (min-width: 900px) { //你的样式放在这里... } 
@media screen and (min-width: 600px) and (max-width: 900px) { //你的样式放在这里... } 
/* iPhone and Smartphones (portrait and landscape) */
@media screen and (min-device-width : 320px) and (max-device-width: 480px) { 
//你的样式放在这里... } 
max-device-width指的是设备整个渲染区宽度（设备的实际宽度）  Landscape phones and down 

@media (max-width: 480px) { ... } // Landscape phone to portrait tablet 
@media (max-width: 768px) { ... } // Portrait tablet to landscape and desktop 
@media (min-width: 768px) and (max-width: 980px) { ... } // Large desktop 
@media (min-width: 1200px) { .. }

个人分类： web前端学习

淘宝移动端开发规范

猜你喜欢