移动端网页开发 分享:杨顺心 WEB 前端开发工程师 2014 年. 目录 1 2 3 4 HTML5 现状 移动端 CSS3 移动端 javascript 调式移动端.

Slides:



Advertisements
Similar presentations
江右弘道书院 弘 毅弘 毅. “ 启蒙运动 ” 何以重要?  “ 启蒙运动 ” 与中国转型 “ 中西古今 ” 四维中的启蒙.
Advertisements

●公司簡介. ●公司組織 行銷 企劃部 行銷 企劃部 研發 設計部 研發 設計部 視覺 設計部 視覺 設計部 媒體 製作部 媒體 製作部 行動 裝置部 行動 裝置部 執行長 總經理 管理部 本公司組織人力配置除董事長、執行長、總經理外,共 有六大部門,分別為研發部 6 人、管理部 4 人、視覺設計部.
第 15 章 Mobile PHP 與 Ajax 15-1 Mobile PHP 15-2 Ajax 的基礎 15-2 Ajax 的基礎 15-3 jQuery 的 Ajax 方法 15-3 jQuery 的 Ajax 方法 15-4 應用實例:關鍵字建議清單 15-4 應用實例:關鍵字建議清單.
Woodsrong javascript:alert(“hello, world ”); var shareInfo = { title: “ 朋友网触屏版开发分享 ”, author: “woodsrong”, time: “ ” }; 朋友网触屏版开发分享.
Web 开发基础 第二章 表格与页面布局. 回顾 Internet 和 万维网 网页的工作原理 网页的基本结构 标记及其属性 段落标记,图片标记,超级链接标记 相对路径,绝对路径,物理路径.
16 邁向網頁的未來-HTML5 Pack 與 Widget Browser 使用 HTML5 來為多重螢幕裝置進行設計 變更檢視區大小
Web app和html5给前端带来的变化 —— 我们的html5游戏平台之旅.
作業2-Javascript實作 (請同學自行研讀電子書或指定之Javascript教科書) 書上習題: 11-3
正确的移动适配 飞鹰正义 百度站长平台 飞鹰正义微信 百度站长社区超级版主
1.3.1 细胞膜——系统的边界 ●高中生物课件(人教课标版) 万晓军生物工作室(安义中学)
皖新数字书屋.
网站开办审核、资格复核和网站标识管理操作
DREAMWEVAER MX 2004入门 楼斌 BBS ID:lou 生命科学学院
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
2 HTML5與CSS3 2-1 HTML5的頁面結構 2-2 HTML5的文字編排標籤 2-3 HTML5的圖片與超連結標籤
第五单元课1-3 层叠样式表.
浏览器工作原理浅析 TID Ghostzhang.
第4章 JavaScript脚本语言基础 4.1 JavaScript简介 4.2 JavaScript语法基础
《网页设计与制作》 教学课件 主讲人:湖南铁道职业技术学院 陈承欢
14 JavaScript语言基础 JavaScript是一种轻量级、解释型的Web开发语言。所谓轻量级,就是语言的体系结构不是很庞杂,例如,没有C、Java等语言中的类、内存管理、系统管理等高深的知识范畴;所谓解释型,就是语言在浏览器或服务器等环境中直接被解释执行,不需要对源代码进行编译操作。
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
一、登录界面 (一)登录方式 1、访问广东工程咨询网 ( 动态里,“咨询师登记工作”专栏 2、 IE地址栏中直接键入管理系统 地址(
RWD網頁設計實務 李欣螢 以誠研發有限公司.
数据访问页.
网页设计(1) 第12讲 网页技术简介 马秀麟 2014年5月 2018/9/17 制作人:马秀麟.
Selenium 一个用于Web应用程序测试的工具 Robin Ren
标准规范 2.自己偏好习惯 3.讨论/建议 永远遵循同一套编码规范 -- 不管多少人同时参与编码,所有代码都应该看上去像是一个人编写的一样。
Web前端开发技术与实践 第12章 布局 阮晓龙 /
选课指导 机械与电子控制工程学院教学科 赵会美 Tel:
Ch01 HTML 5 資料格式 網頁程式設計.
Ajax编程技术 第一章 Ajax简介.
邁向 HTML5 如何與 ASP.NET 整合 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 )
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
作者:different(D姐),前端工程师 博客: 新浪微博:inline_block
Happy Designer 第四次聚會 課程內容分享 2008/11/20.
Web前端开发技术与实践 第3章:初识HTML5 阮晓龙 /
HTML5简介 WEB前端三剑客之一.
JavaScript 靜宜大學 資管系 楊子青.
Web前端开发技术与实践 第10章:盒子模型 阮晓龙 /
HTML5全栈开发序列课程 《前端入门》之CSS3新特性 余鹏作品.
Web前端开发技术与实践 第11章:背景与边框 阮晓龙 /
湖北职院计科系.
CSS 钟晖云 QQ:
All rights reserved by Copyright All rights reserved by
移动知网 同方知网(北京)技术有限公司.
十二年國民基本教育中等學校教師教學專業能力研習五堂課
HTML & CSS.
UI设计标准、移动开发规范、移动管理规范、集成标准规范
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
基礎程式設計範例 -網頁名片.
网 站 设 计 与 建 设 Website design and developments
CSS技术 蒋玉华.
/ 第7讲:移动开发 冯顺磊 /
第2章 初识Dreamweaver CS4 Adobe Dreamweaver CS4是建立Web站点和应用程序的 专业工具。它将可视布局工具、应用程序开发功能和 代码编辑支持组合在一起,其功能强大,使得各个层 次的开发人员和设计人员都能够快速创建界面吸引人 的基于标准的网站和应用程序。从对基于CSS的设计.
2.2 Web界面设计 信息工程系 向模军 Tel: QQ:
HTML 5與課程簡介 靜宜大學 資管系 楊子青.
Web Programming 網際網路程式設計
计算机网络与网页制作 Chapter 11:用CSS作页面布局
Ch09 在網頁之間傳遞資訊 網頁程式設計.
JavaScript Sunxiaoshen.
——关于机构内用户,非机构内用户,及移动端使用
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
武汉纺织大学传媒学院 cm.wtu.edu.cn
第13章 新闻发布系统的 页面美工.
網路商店裝修之二 CSS樣式編輯.
黑龙江省科学基金 项目验收填报培训 黑龙江省计算中心 2015年09月.
第5章 Div+CSS布局技术 经济管理学院.
104學年度 進修學校期初工作報告.
JavaScript 教师:魏小迪
Presentation transcript:

移动端网页开发 分享:杨顺心 WEB 前端开发工程师 2014 年

目录 HTML5 现状 移动端 CSS3 移动端 javascript 调式移动端

01 / HTM5 埋下的坑 这是业界笼统的概念,对我们来说是指高级的 html ,高级的 css 和高级的 js 。 浏览器支持情况:

02/ HTM5 埋下的坑 DTD 和 META : width - viewport 的宽度 height - viewport 的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放 user-scalable:no 是实现 position:fixed 的关键

03/ HTM5 常用标签 header, nav, article, section, aside, footer, time, canvas, audio, video, source PC: iOS: Android: iOS PC Android

04/ HTM5 表单控件 iOS6 才开始支持 , Android 都支持 iOS5 及以上开始支持 input type: date, datetime , month , time , range 但是 week 还不支持 Android 支持情况各有差异,通常就 tel 和 search 类型支持较好

05/ HTM5 表单控件 移动端的 html5 表单控件在 iOS6 上的情况:

06/ HTM5 表单控件 移动端的 html5 表单控件 tel 、 number 、 search 的效果: tel number search

07/ 移动端 CSS3 主要特点: 可以只针对 webkit 内核浏览器编写,支持常见 css3 效果 屏幕小,最常见屏幕宽度是 320px ( iPhone 和大部分 Android ) 、 360px( 小米 2) 、 480px 、 768px ,较老的 Android 手机有 240px 的 有第三方浏览器,如 UC 浏览器、 QQ 浏览器存在 Android 品种繁多,适配麻烦, css3 效果与 iOS 差异大,表 单控件处理常需要借助 js 来 hack

08/ 移动端 CSS3

09/ 移动端 CSS3 必须重视的 css 差异: 固定定位 (position:fixed),iOS 和 Android 都支持得不好,Android 禁用 掉 页面缩放功能 (viewport 中设置 user-scalable=no) ,但 iOS5 以下系统无效 局部滚动 (overflow:scroll),overflow 也非常不好使, iOS5 以下系统无效 , iOS5 及以上可以勉强使用 于是才有了 iScroll.js 的模拟滚动 … { -webkit-overflow-scrolling:touch; overflow:auto; }

10/ 移动端 CSS3-Media Queries 在 css 中使用 在 link screen and (max-width: 600px) {.class { background: #ccc; screen and (max-device-width: 480px) {.class { background: #ccc; }

11/ 移动端 CSS3 多个 Media Queries 针对高清屏幕(视网膜屏幕) screen and (min-width: 600px) and (max-width: 900px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) {.class { background: #ccc; }

12/ 移动端 CSS3- 常用的 CSS 归纳 去掉点击链接和文本框对象的半透明覆盖层 (iOS) 或者虚框 (Android): -webkit-tap-highlight-color:rgba(0,0,0,0); // 慎重使用,可能会给 Android 表单控件带来巨大麻烦 禁用长按页面时的弹出菜单 (iOS 下有效 ): -webkit-touch-callout:none; 禁止文字自动调整大小 ( 默认情况下旋转设备的时候文字大小会发生变化 ): -webkit-text-size-adjust: none; 禁止页面文字选择 : -webkit-user-select: none; 局部滚动 ( 仅 iOS 5 以上支持 ): -webkit-overflow-scrolling:touch; 转变盒模型 (width 定义变为包含 padding border-width, 不含 margin): -webkit-box-sizing: border-box; 消除输入框和按钮的原生外观,在 iOS 上加上这个属性才能给按钮和输入框自定义样式 : -webkit-appearance: none;

13/ 移动端 CSS3- 常用的 CSS 归纳 关于 background-szie : background-size:x y;// 值是横轴 纵轴 background-size:100%;// 等比例让 x 轴占满该容器, y 轴可能没有占满 background-size:50px 80%; background-size:cover;// 等比例占满容器,按照图片小的那边铺满 background-size:contain;// 等比例缩小 background-size:auto; // 保持原样,不拉伸压缩图片大小 举例:

14/ 移动端 javascript 移动端的 click 事件: 一系列事件的触发顺序 touchstart touchmove ( 可能没有 ) touchend mouseover mousemove click

15/ 移动端 javascript iOS 阻止默认的 click 事件原理: 需要注意: (1) 只是 iOS ,其他平台不必 (2) 在 touchend 时就看手指移动情况来决定该阻止 click 或者是取消 touch 事件 (3) 只有 event 类型为 click 时才有必要阻止 在 touchend 的时候与 touchstart 时比较时间、位置,以区别是否要执行 “ 按下 ” 的 操作。 Zepto 比较好的解释了这个 “ 按下 ” 事件,由一系列的 touch 事件封装成一个 ”tap” 事件。

16/ 移动端 javascript 旋转事件: 需要注意: window. onorientationchange var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; window.addEventListener(orientationEvent, function() { alert(orientation); if (orientation == 90 || orientation == -90) { alert(' 横屏 '); } else { alert(' 竖屏 ') } }, false);

17/ 移动端 javascript 滑动事件原理: 通过事件委托,给 body 绑定 touch 相关的事件,然后在 touchmove 和 touchend 的 时候分别根据手指触摸的对象的位移和方向来判断以便做相应的操作。在 move 过程中超过一定距离之后就开始通过动画如 -webkit-transform 来实现容器的移动 ,并在 touchend 手指离开的时候判断容器该变化还是该归位。 Zepto 中有一段获取移动方向的方法: function swipeDirection(x1, x2, y1, y2) { var xDelta = Math.abs(x1 - x2), yDelta = Math.abs(y1 - y2) return xDelta >= yDelta ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down') }

18/ 移动端 javascript LocalStorage 介绍: 数据存储: var arr = [0, 1, 1, 1]; // 本地存储, IE cookie , 其他浏览器 HTML5 本地存储 if (window.localStorage) { localStorage.setItem(“test", arr); } else { Cookie.write(“test", arr); } 数据读取: var str = window.localStorage? localStorage.getItem(“test"): Cookie.read(“test");

19/ 移动端调试 常见方法: 将项目发布到未公开的可通过外网访问的服务器 在本地搭建服务器,在 WIFI 与 PC 同网段的前提下直接通过输入 PC 的 ip 地址进行访问 使用 Fiddler 设置代理

20/ 移动端调试 在移动端使用 Fiddler 抓取 http 请求数据: 在自己台式机里面安装 Fiddler2 打开 Fiddler ,选择工具栏 Tools – Fiddler Options – Connections 中勾选 Allow Remote Computers to Connect 查看自己台式机的 IP 地址,如 把 iOS 设备连接到和台式机在同一个局域网的 wifi ,打开 iOS 的 wifi 设置,进入当前 wifi 连 接,设置 HTTP 代理 Group ,将服务器填为上一步中获得的台式机 IP ,即 ,端 口填 8888 ( 和 Fiddle 设置中一致即可 ) 完成上述操作后,重启 Fiddler ,然后在 Fiddler 中就可以捕捉到 iOS 设备的 http 请求了 如果要转发请求,在主界面的 AutoResponder 选项卡中添加转发规则 ( 支持正则表达式匹 配 ) 有的 android 手机无法设置代理,但是一般比较新的都可以设置。小米手机是典型的可以 的。

21/ 移动端调试 在移动端使用 Fiddler 抓取 http 请求数据: PC 上的 fiddler 截图

22/ 代码优化 良好的 js 加载方式:......

23/ 代码优化 慎重使用的 css 选择器: * 号选择器,据说性能非常差 ( 中枪了 ) 属性选择器,如 div[_href=“ 伪类选择器,如 li:first-of-type 后代选择器,如.test div

24/ 代码优化 慎重使用的 css3 效果: 大范围的阴影效果, box-shadow 大范围的渐变, -webkit-gradient 大量的圆角元素, border-radius 复杂的动画

25/ 代码优化 良好的 js 加载方式: 所有的 JS 文件压缩合并成一个文件在页面顶部异步引入,可以使用两种方式( 方法 2 的兼容性比较好) : var s = document.createElement("script");s.src = "test.js";document.getElementsByTagName("head")[0].appendChild(s); ( async 和动态创建 JS 方式不能保证多个 JS 文件的执行顺序) 不重要的 JS 文件可以在页面最底部使用 引入并且不会阻塞页面渲染,但是页面底部的外链 文件会推迟 DOMContentLoad 事件,所以页面中的 JS 最好全部使用异步 加载方式。