移动端开发分享.ppt

如何使用Application Cache Nginx 修改mime.types 添加一行 text/cache-manifest manifest; * 丰富多彩的API支持，使前端能干的更多： navigator.vibrate navigator.geolocation.getCurrentPosition navigator.battery Canvas webGL App can Webpage can also 听众互动环节：扫一扫 * 那些年我所踩得坑 * 1.当你需要做一个可滑动轮播banner时，你需ontouchmove=“event.preventDefault()” 2.当你需要用到fixed布局时，首先需要禁用页面的缩放，兼容iOS下你需要left:0;top:0; 兼容Android 2.x需要-webkit-backface-visibility: hidden; （如果在旋转元素不希望看到其背面时，该属性很有用。 ） 尝试使用js插件iscroll 3. 通过设置-webkit-tap-highlight-color:transparent;更改按钮或链接点击后的颜色 4.Overflow:scroll;滑动涩顿卡？尝试-webkit-overflow-scrolling?:?touch;? 5.横屏后字体自动变大？ -webkit-text-size-adjust:none; 6.当你希望监听输入框变化时用过了change，keyup等依然无用时，尝试oninput 7.做动画的时候，不要用jquery的animate去搞，用css3 transiton效率高很多倍，当transition做动画时，需要用3d来触发GPU硬件加速渲染支持 8.更新样式和脚本在部分终端需要加时间戳可保证不从缓存读取 9.部分终端只支持click点击事件，不支持tap事件，例如新浪微博、腾讯微博 10.当需要关闭遮罩时不要用tap事件，会导致直接连击遮罩后方的区域 11.收起浏览器地址栏?setTimeout(function(){ window.scrollTo(0, 1); }, 100); 12.如何实现在手机端实现PC设计稿给出的1px边框？ 13.利用-webkit-appearance:none;去掉浏览器默认组件样式，例如改造select 14.微信内置浏览器在做keyframe动画时，区分不出来0和0px 15.慎用高版本内核支持的新特性，以为国内大多浏览器的内核连chrome10都达不到 16.如何做出类似原生APP的抽屉动画效果，贝塞尔曲线 17.利用media query做响应式布局 18.如何阻止网页横屏？ 19. a:hover在移动端不好用怎么办 20.微信中图片模糊或者圆角模糊 overflow:hidden; * / * 不鼓掌？信不信我弄死你我！ Do sth. Special on Mobile Zhan.cheng 1.初探移动端开发我遇到的问题 2. 分辨率与屏幕尺寸的关系 3.移动端开发调试 4.有趣的H5 5.那些年我踩过的坑 移动端设计稿上的给出像素除以2？ 为什么viewport标签必须加？ 移动端的页面如何做到一行代码跑遍上百个不同的设备？ 移动端有什么好用的js框架？ 移动端前端开发和PC端前端开发有哪些异同？ 移动端可以配host吗？ 移动端如何抓包？ 传统的PC 980居中layout彻底结束，所有样式均需自适应？ 初探移动前端开发 操作系统：Android、iOS主流 系统版本：Android.2x – Android.4x iOS.5x – iOS.8x 分辨率：移动下所有分辨率 机型：苹果n、小米n、华为n、三星n… 内核：Webkit、Gecko、Trident、Presto 浏览器厂家：搜狗、QQ、Safari、chrome 包括各种应用内置浏览器：新浪微博、微信 需要考虑的兼容 分辨率与屏幕尺寸的关系 http://screensiz.es/phone 像素密度计算公式： 设备名称 屏幕尺寸 分辨率 屏幕比例 density 像素密度 PC 19英寸 1440 * 900 16 : 9 100% 89ppi iPhone6+ 5.5英寸 1080 * 1920 9 : 16 260% 401ppi iPhone4 3.5英寸 640 * 960 2 : 3 200% 326ppi Nexus5 4.95英寸 1080 * 1920 9 : 16 300% 445ppi MacBook pro 13英寸 2560 * 1600 8 : 5 200