AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

浅淡移动web开发 by 志刚

发布者 weber
发布于 1433465284834  浏览 5050 关键词 前端, 移动开发 
分享到

第1页

长沙前端群:12130166
志刚
QQ:4241089 | Tomato
浅谈移动Web开发

第2页

第3页

viewport

也就是可视区域。

移动设备屏幕不同web,改变viewport;


操作的属性有4 个:

width -             //  viewport 的宽度 (范围从200 到10,000,默认为980 像素)
height -            //  viewport 的高度 (范围从223 到10,000)
initial-scale -     //  初始的缩放比例 (范围从>0 到10)
minimum-scale -    //   允许用户缩放到的最小比例
maximum-scale -    //   允许用户缩放到的最大比例
user-scalable -    //   用户是否可以手动缩 (no,yes)

第4页

使用 viewport




target-densitydpi 被弃用了

第5页

网络

window.navigator.onLine检测网络是否可用


navigator.connection 判断网络类型

第6页

localStorage

1、它是同步的。

2、它仅支持字符串。需要使用 JSON.parse 与 JSON.stringify 进行序列号和反序列化。
这是因为 localStorage 中仅支持 JavaScript 字符串值。
不支持数值,布尔值,Blob 类型的数据。

第7页

模拟:hover伪类

因为iPhone并没有鼠标指针,所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件,onTouchStart 类似 onMouseOver,onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript:
然后用CSS增加hover效果:

a:hover, a.hover { /* 你的hover效果 */ }

第8页



// 隐藏地址栏  & 处理事件的时候 ,防止滚动条出现

addEventListener('load', function(){ 

        setTimeout(function(){ window.scrollTo(0, 1); }, 100); 

});
添加屏幕旋转事件侦听,可随时发现屏幕旋转状态(左旋、右旋还是没旋)

第9页

启用原声应用


首先通过URL Scheme尝试打开本地APP,如果打开成功,网页中setTimeout将会挂起,重新回到页面时超时不再执行,否则,如果打开失败,则尝试下载或进入下载页面。
http://www.zhihu.com/question/19907735

第10页

需求:
按屏滚动即用户滑动屏幕翻页,屏幕自动锁定到当前页。我们会碰到的问题:



重置<html>高度;

document.documentElement.style.height = window.innerHeight + 'px';

第11页

如何解决音频播放预加载与延时的问题

第12页

摇一摇功能
//DeviceOrientation包括两个事件:
//1、deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。
//2、deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。

第13页

https://github.com/educastellano/qr-code/tree/gh-pages/src
二维码生成

第14页

重力感应的实现相对简单,具体见如下代码。值得注意的是,android需3.0及以上才支持。

第15页

http://cubiq.org/iscroll-5
http://touch.code.baidu.com/

第16页

1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影。
备注:transparent的属性值在android下无效。

2、-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影,解决iOS下无法修改按钮样式,测试还发现一个小问题就是,加了上面的属性后,iOS下默认还是带有圆角的,不过可以使用 border-radius属性修改。

3、-webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅(这个属性会调用硬件加速模式,无需通过JS引擎,直接浏览器内核渲染),但是在android下不可乱用,很多见所未见的bug就是因为这个。

4、@-webkit-keyframes可以预定义很多你所想到的动画,然后通过-webkit-transition来调用。

5、-webkit-background-size可以做高清图标,不过一些低版本的android只能识别background-size,所以有必要两个都要写上;用这个属性的时候推荐用cover这个值,可以自动去匹配宽和高。

6、border-radius、box-shadow、gradient、border-image,不解释,可以精简代码。

7、android、ios4及以下,固定宽/高块级元素的overflow:scroll/auto失效,属于浏览器的bug,可借助第三方工具实现。
8、ios5+可以通过scrollTo(0,0)来自动隐藏浏览器地址栏。

9、css3动画会影响你的自动聚焦,所以自动聚焦要在动画执行之前来做,或者直接舍弃。

10、如果涉及较多域外链接,DNS Prefetching可以帮你做DNS预解析。

11、如果你希望你的站点更多地在SNS上传播,那么Open Graph Protocol会比较适合你。

12、当用iScroll时候,不能使用:focus{outline:0}伪类,否则滑动会卡。

13、IOS禁止横竖屏时字体变大,-webkit-text-size-adjust: none;

14、iphone的Retina显示屏的css中的数值都得翻倍,包括图片大小也得翻倍,Retina显示屏精致,可以简单理解为Retina显示屏上的1像素相当于普通的2像素。

15、解决闪屏,-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d;

16、触摸事件用touch系列,不要用click替代;

17、关于电量,JPEG最省电(JPEG>PNG>GIF),图片数量约多,约大约耗电,AJAX动态内容耗电,reflow和repaint耗电,webGL和translate3d耗电

第17页

加载中有哪些优化手段:
基于联通3G网络平均338KB/s(2.71Mb/s)

第18页

   A.显性加载

第19页

B.隐性加载

第20页

C.按需加载

第21页

D.响应式加载方式

第22页

JPEG复杂颜色及形状、尤其是照片

而对于png有以下结论:

a.多彩图片使用png24

b.低彩图片使用png8

第23页

非常小的图片可以直接用base64

第24页

第25页

第26页

第27页



一代宗师。

学习,分享,再学习....

第28页

Thank you!
支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。