移动端WEB前端开发最佳实践

移动端WEB前端开发最佳实践

• Safari，Android Browser，Chrome都是以WebKit为核心的
• 移动设备和PC之间的页面现实存在差异（Safari中定义了viewport）
• 在移动设备和桌面端WEB前端开发中，事件绑定存在差异（移动触点）
• 页面控件设计存差异（点触不灵敏，虚拟键盘弹出框）
• 移动设备的网络带宽普遍比PC慢，移动页面要设置更简洁

PC页面兼容移动设备

• 使用流式布局
• 借助CSS Media queries（媒体查询）技术
• 使用合适的图片显示兼容方案
• 保持页面简洁，不要使用页面不兼容的技术（Flash技术降级方案，尽量不使用，使用HTML5 Canvas，避免使用播放，网络连接，存储，访问本地文件等）
• 设置viewport
  
  
  • 增加链接和按钮的可操作区域
  • 使用响应式设计框架（bootstrap,Zurb Foundation,Skeleton）
  • 使用工具检查网页的移动设备兼容性:MobiReady,W3C mobileOK Checker,iPadPeek让用户输入测试网址,Howtogomo除了显示截屏还提供建议

开发移动WEB站点的准备工作

• 确定支持的移动设备（尺寸，DPI，内存，CPU性能，常用浏览器版本等）
• 处理和桌面端主网站的交互（User-Agent，用js判断推荐使用Mobile-Detect,isMobile,提供了很多的接口调用，最简单包括isMobile，isTablet）
• 设计移动站点为单页模式，避免页面跳转
• 选择一个合适的前端框架（JQuery-mobile，Sencha Touch，Kendo-UI，Ionic）
• 如何调试移动页面（chrome自带的DEV，包括设备型号，屏幕尺寸，User Agent等）

移动端的最佳实践

• HTML最佳实践：

  • 在页面head中添加必要的meta和link信息：

        <!-- 声明文档使用的字符编码 -->
                  <meta charset='utf-8'>
                  <!-- 优先使用 IE 最新版本和 Chrome -->
                  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
                  <!-- 页面描述 -->
                  <meta name="description" content="不超过150个字符"/>
                  <!-- 页面关键词 -->
                  <meta name="keywords" content=""/>
                  <!-- 网页作者 -->
                  <meta name="author" content="name, email@gmail.com"/>
                  <!-- 搜索引擎抓取 -->
                  <meta name="robots" content="index,follow"/>
                  <!-- 为移动设备添加 viewport -->
                  <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
                  <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 
                  全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->