Recomendados
Mais conteúdo relacionado
Destaque
Semelhante a Touch开发应届生培训
Semelhante a Touch开发应届生培训 (20)
Mais de Zhi Zhong
Touch开发应届生培训
- 2. 目 录 1 无线web开发概况 2 基础知识 3 事件 4 调试 目 录
- 3. 1 无线web开发 概况
- 7. 无线网络的特点1.4 设备屏幕小 • 按钮足够大 时间碎片化 • 暂停/随时中断 网速不稳定 • Wifi/2G/3G/4G 网络不稳定 • 网络状态监控 设备性能差 • 网页性能/动画 流量耗费用 • 资源尽量小 设备繁多 • 注意兼容性
- 9. 2 基础知识 • viewport • tel • sms • input
- 10. viewport2.1 viewport 全部属性 属性名称 属性说明 属性值 width viewport宽度 960 戒 device-width height viewport高度 1000 戒 device-height initial-scale 初始缩放比例 0.5 maximum-scale 最大缩放比例 2 minimum-scale 最小缩放比例 1 user-scalable 是否允许用户缩放 1 戒 0 (yes 戒 no) <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum- scale=1.0,user-scalable=no"> 锁定屏幕，禁止缩放
- 14. 新增的input类型2.4 http://www.w3school.com.cn/html5/html_5_form_input_types.asp HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的 输入控制和验证。 类型 说明 email 邮箱 url 网页地址 number 数字 range 一定范围内数字值 date 日期 search 搜索域 tel 电话
- 15. input示例2.4 查看源码
- 21. input type="range"截图2.4 属性 值 描述 max number 规定允许的最大值 min number 规定允许的最小值 step number 规定合法的数字间隔（如果 step="3"，则合 法的数是 -3,0,3,6 等） value number 规定默认值
- 22. input type="file"截图2.4 1. iOS只能选择【照片】中的文件 2. 支持现场拍照照片戒录制视频
- 23. 3 事件
- 25. :hover3.2 -webkit-tap-highlight-color 点击链接高亮的时候设置 颜色为透明 :hover 选择器用于选择鼠标指针浮动在上面的元素 a:hover { background-color: yellow; } a { -webkit-tap-highlight-color: yellow; }
- 26. 新增touch事件3.3 事件名称 说明 touchstart 手指放在一个DOM元素上 touchmove 手指拖曳一个DOM元素 touchend 手指从一个DOM元素上移开 touchcancel 触摸被中断 1.touchstart 2.touchmove 3.touchend
- 27. Touch事件示例代码3.3 obj.addEventListener('touchmove', function(event) { // iOS支持多触点，android只支持一个触点 for (var i = 0; i < event.targetTouches; i++) { // DOM元素，是动作所针对的目标 var touch = event.targetTouches[i]; // 唯一标识触摸会话（touch session）中的当前手指 console.log('touched ' + touch.identifier); // 动作在屏幕上发生的位置 console.log(touch.pageX); console.log(touch.pageY); } }, false);
- 28. 从touch事件演变成手势3.4 核心还是event.targetTouches，event.pageX, event.pageY, time = touchstart - touchend
- 30. online/offline3.5 navigator.onLine online/offline 事件 navigator.onLine 属性表示当前是否在线。如果为 true, 表示在线；如果 为 false, 表示离线。当网络状态发生变化时，navigator.onLine 的值也随 之变化。开发者可以通过读取它的值获取网络状态。 开发者还需要在网络状态发生变化时立刻得到通知，因此 HTML5 还提供 了 online/offline 事件。当在线 / 离线状态切换时，会触发online/offline 事件，因此，开发者可以通过监听它们的 online/offline 事件来获悉网络 状态。
- 31. Online/offline示例代码3.5 window.addEventListener('online', onlineHandler, false); window.addEventListener('offline', onlineHandler, false); // 监听网络变化 function onlineHandler() { console.log(navigator.onLine); } 查看代码
- 32. deviceorientation3.6 提供设备的物理方向信息，表示为一系列本地坐标系的旋角。 触发很频繁，毫秒级，谨慎使用 //注册一个deviceorientation事件的接收器 window.addEventListener("deviceorientation", function(event) { // 处理event.alpha、event.beta及event.gamma console.log(event.alpha、event.beta, event.gamma); }, true);
- 33. orientationchange3.7 orientationchange事件主要用于手机浏览器，作用于触发手 机的横屏和竖屏之间的切换。我们可以根据这个事件，改变手机 在横屏和竖屏的显示状态。 window.addEventListener("orientationchange", function(event){ // portrait竖屏 | landscape 横屏 console.log(event.orientation); });
- 35. Chrome DevTools4.1 https://developers.google.com/chrome-developer-tools/ 官方文档 1. 按F12开启开发者工具 2. 【Emulation】选项卡 名称 说明 Device 模拟何种设备 Screen 屏幕显示相关选项 User Agent 模拟浏览器UA Sensors 传感器信息
- 36. 真机调试4.2 1. 本地起一个web server，戒者上传到开发机 2. 用真机通过ip戒者域名访问网页
- 37. 5 Q & A