`
shuai1234
  • 浏览: 930991 次
  • 性别: Icon_minigender_1
  • 来自: 山西
社区版块
存档分类
最新评论

html5移动web开发小记

 
阅读更多

一、配置移动开发环境 
1.各种仿真器、模拟器的下载安装 
http://www.mobilexweb.com/emulators 
https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Emulators-&-Simulators 

2.html5 DTD 
<!doctype html> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
safari: 设为屏幕宽度，并根据initial-scale=1.0禁止浏览器缩放 

3.帮助html5跨浏览器的库 
modernizr 
html5shim 
innershiv 

4.使html5元素在旧版本IE中变成块级元素以及css重置 

5.始终使用流式布局fluid layout 

6.css媒介查询 media query 
@media screen and (min-width: 480px) {...} 

@media only screen and (min-width: 320px) {...} 

7.用户需求分析工具 
google analytics 
percentmobile 

jQuery mobile的浏览器分级列表：http://jquerymobile.com/gbs/ 
https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices 

二、移动端的配置和优化 
1.提供启动图标（优化对各种浏览器的支持）

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icons/apple-touch-icon-114x114-precomposed.png"> # iphone4
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icons/apple-touch-icon-72x72-precomposed.png"> # ipad
<link rel="apple-touch-icon-precomposed" href="icons/apple-touch-icon-precomposed.png"> # android
<link rel="shortcut icon" href="icons/apple-touch-icon.png"> # symbian60

  

文档：关于触摸式图标的一起 

2.避免字体被浏览器自动重置 
html { 
    -webkit-text-size-adjust: none; 
} 
改进 
html { 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
    text-size-adjust: 100%; 
} 

3.使用px 

4.浏览器宽度完整解决方案 
<meta name="HandheldFriendly" content="true"> # 古老版本浏览器 
<meta name="MobileOptimized" content="320"> # 老版本浏览器 
<meta name="viewport" content="width=device-width"> 

5.修复移动版safari的re-flow scale问题 
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0"> # 不能缩放了 
使用js代码解决不能缩放问题：

var metas = document.getElementByTagName("meta");
var i;
if(navigator.userAgent.match("/iPhone/i)) {
  for(i=0; i<metas.length; i++) {
    if(meta[i].name == "viewport") {
      metas[i].content = "width=device-width, maximum-scale=1.0, minimum-scale=1.0";
    }
  }
  document.addEventListener("gesturestart", gestureStart, false);
}

function gestureStart() {
  for(i=0; i<metas.length; i++) {
    if(meta[i].name == "viewport") {
      metas[i].content = "width=device-width, maximum-scale=1.6, minimum-scale=0.25";
    }
  }
}

  

更好的版本：https://gist.github.com/903131 
jquery mobile版本：https://gist.github.com/1183357 

6.在浏览器中启动原生应用 
查看safari，黑莓，索爱支持哪些链接启动原生应用 

7.iphone下全屏 
<meta name="apple-mobile-web-app-capable" content="yes"> # 从界面图标启动时，全屏
<meta name="apple-mobile-web-app-status-bar-style" content="black"> # 顶部一个状态栏 
<link rel="apple-touch-startup-image" href="img/1/splash.png"> # 预加载界面图片，类似ajax效果 

8.防止ios在聚焦时自动缩放，例如填写表单时 
<script> 
</script> 

9.禁用或者限制部分webkit特性 
-webkit-touch-callout 
-webkit-user-select 
-webkit-tap-highlight-color 
-webkit-appearance 

为狭窄的浏览器添加省略号功能： 
.ellipsis { 
  text-overflow: ellipsis; 
  overflow: hidden; 
  white-space: nowrap; 
} 

三、移动设备的交互方式 
1.利用触控来移动页面元素 
2.检测盒处理横竖屏切换事件 
window.onorientationchange事件 
禁止横竖屏对于网友非常困难 
3.利用手势旋转页面元素 
ongestureend 
4.利用滑动创建图库 
zepto框架 

5.利用手势缩放图片 
ongesturechange 

四、构建快速响应式移动互联网站点 
1.html5标签 
header，nav，footer，small，address 

2.css3辅助 
polyfills库 
ultimate css gradient generator # css线性渐变效果编辑器 
CSS3 PIE # 兼容IE9 

3.响应式 
使用modernizr库开检查浏览器对html3和css3的支持 
可以用来检查后是否加载respond.min.js 
yepnope异步加载 

4.检测客户端 
.htaccess重定向 

5.使用书签冒泡为应用添加桌面快捷方式 
mobilebookmark bubble库 from google # 只支持safari 

6.构建可伸缩的文本输入框 
mobile boilerplate库的helper.js 

7.加速按钮反馈 
touchstart 

8.隐藏浏览器地址栏 
MBP.hideUrlBar(); 

五、移动设备访问 
1.获取位置信息 
经度、纬度、当前位置的精确程度 
navigator.geolocation.getCurrentPosition() 

2.跨浏览器定位 
geo-location-javascript库 
延伸：YQL Geo库 

手势缩放： 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 

3.实时显示地理位置 
watchPosition 

4.DeviceOrientation事件 # 适用于ios 
包括设备移动事件和横竖屏切换事件 

5.使用foursquare定位 
Marelle基于jquery和coffeescript 
https://praized.github.com/marelle/ 
包括两个例子：登录和签到 

foursquare接口列表 
https://developer.foursquare.com/docs/libraries.html 

六、移动富媒体 
1.移动设备上播放音频 
<audio> 
不支持html5的浏览器使用polyfills解决 

2.移动设备上播放视频 
<video> 
不支持html5的使用<boject> 

http://diveintohtml5.info/video.html 

3.使用离线缓存 
使用.appcache 

4.使用网络存储 
web storage # 浏览器支持度最高 
html5的indexed database api和web sql database 
jqueryoffine库 

5.使用web workers 
javascript多线程的补充 

6.使用session和history api构建类Flash导航效果 

七、移动设备调试 
1.使用opera dragonfly远程调试 
2.使用weinre远程调试 

3.移动设备上使用firebug 
4.使用js console远程调试 

5.配置移动safari调试器 

八、服务器端性能调优 
1.防止移动设备转码 
.htaccess配置 

2.添加移动设备支持的MIME类型 
.htaccess配置 # 针对blackberry和Symbian等 

3.正确显示cache manifest # 主要用来做离线应用存储功能，但是扩展名不能被服务器识别 
.htccess配置 

4.在头文件中设置未来过期时间 
.htccess配置 

5.使用gzip压缩 
.htaccess配置 

6.移除etags 
.htaccess配置 

九、移动性能测试 
1.使用blaze的移动设备速度测试 

2.在线分析移动页面速度 
google page speed 

3.pcap网站性能分析 

4.移动版http archive 

5.使用jdrop存储性能数据 

十、拥抱移动互联网特性 
1.window.onerror 
2.使用ecmascript5中的新方法 
3.html5中的新输入类型 
date、datetime、month、time、range 
4.HTML中内嵌svg 
5.position:fixed 
6.overflow:scroll # ios5+ 

-webkit-overflow-scrolling: touch

分享到：
| Android代码混淆
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics