Web前端开发项目实训 第7讲:移动开发 18337149582/ hunlei@51xueweb cn 201712
Web前端开发项目实训 第7讲：移动开发 冯顺磊 18337149582 / fengshunlei@51xueweb.cn 2017.12 1
2 本讲主要内容 口移动Web开发包含哪些内容? 口如何做移动Web开发? 口一个移动网页的案例
本讲主要内容 移动Web开发包含哪些内容？ 如何做移动Web开发？ 一个移动网页的案例 2
3 1移动Web开发包含哪些内容? 口可以按照表现方式的不同将移动Web分为移动网页和移动APP两种。 87%0带,C A8口 手机跑酬 小米商城一小米方网站,小米手机,红来手 凰Q保妈用蜜主汤祸一 m。按品名 新闻视频军体育娱乐财经历史 金面屏生适 汽车社会房产科技凤愿号港澳小说 搞笑台湾NBA旅游匠选酷站V 直降300元 2999 直播雅球奖:《大小谎言》横扫电视类奖 今日要闻点击切摸城市法国总统马克龙访华 红米5P我us 米动手表春版 关乎民族命运的考试习近平这样叮 马克龙夫妇首访中国参观兵 U 曰 1三
1.移动Web开发包含哪些内容？ 可以按照表现方式的不同将移动Web分为移动网页和移动APP两种。 3
4 1移动Web开发包含哪些内容? 口移动网页:在移动端表现良好的网页。 口移动端的网页开发与PC端的网页开发有着什么样的区别?
1.移动Web开发包含哪些内容？ 移动网页：在移动端表现良好的网页。 移动端的网页开发与PC端的网页开发有着什么样的区别？ 4
5 1移动Web开发包含哪些内容? 口移动端的浏览器兼容性问题少之又少。 口移动端有着各种各样的手势操作。 ¤移动端存在着不同手机的适配问题
1.移动Web开发包含哪些内容？ 移动端的浏览器兼容性问题少之又少。 移动端有着各种各样的手势操作。 移动端存在着不同手机的适配问题。 5
6 1移动Web开发包含哪些内容? 口移动APP 先了解下三种移动端的APP Native App原生app手机应用程序 使用原生的语言开发的手机应用, Android系统用的是ava或者是新的Ktin,OS系 统用的是 object-C或者是新的Swft Hybrid App混合型app手机应用程序 也有另外的一个名字叫做【套壳开发】,混合使用原生的程序和htm5页面开发的手 机应用。 Web App基于Web的app手机应用程序 完全使用htm5页面加前端框架开发的手机应用
1.移动Web开发包含哪些内容？ 移动APP ◼ 先了解下三种移动端的APP ◼ Native App原生app手机应用程序 使用原生的语言开发的手机应用，Android系统用的是java或者是新的Kotlin，iOS系 统用的是object-C或者是新的Swift。 ◼ Hybrid App 混合型app手机应用程序 也有另外的一个名字叫做【套壳开发】，混合使用原生的程序和html5页面开发的手 机应用。 ◼ Web App 基于Web的app手机应用程序 完全使用html5页面加前端JS框架开发的手机应用。 6
7 1移动Web开发包含哪些内容? 口 Web app s apple-mobile-Web-app-capable tite)小米商城-小米官方网站,小米手机、红米手机正品专卖/ title> metahttp-equive"x-ua-compatible"content="iesedge"> meta name="viewport" content="width=device-width, initial-scale=l, minimum-scale=l, maximum-scale=l, user-scalable=0, minimal-ui"> meta data-hid=" description"data-vue-meta="true"nane=" description" content="小米商城直营小米公司旗下所有产品,囊括小米手机、红米手 售后支持。” meta data-hid=" keywords"data-vue-meta="true"name=" keywords" content="小米,小米官网,小米手机,小米官网首页小米商城" meta name"apple-mobile-web-app-capable" content-"yes">== se meta name="msapplication-TileImage"content"/static/img/icons/msapplication-icon-144x144 png">
1.移动Web开发包含哪些内容？ Web APP ◼ apple-mobile-web-app-capable 7
8 2如何做移动Web开发? 口什么是 viewport? 手机浏览器是把页面放在一个虚拟的窗口"( viewport)中,通常这个虚拟的窗口 vIewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手 机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。 在这个里边有三个层次的 ewport 专业学习图 layout viewport visual viewport ideal viewport世个性学 口设置的是 ayout viewport 文章资源科术两 ahttps://www.cnblogs.com/exhuasted/p/5838090.html 07并 29下己
2.如何做移动Web开发？ 什么是viewport？ ◼ 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口” （viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手 机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。 ◼ 在这个里边有三个层次的viewport layout viewport visual viewport ideal viewport 设置的是layout viewport https://www.cnblogs.com/exhuasted/p/5838090.html 8
9 2如何做移动Web开发? 口 Viewport的设置? 一个常用的针对移动网页优化过的页面的 viewport meta标签大致如下 meta name="viewport"content="width=device-width, initial-scale-1l, maximum-scale-l width:控制ⅵ ewport的大小,可以指定的一个值,如果600,或者特殊的值, 如 device-width为设备的宽度(单位为缩放为100%时的CSS的像素)。 height:和 width相对应,指定高度。 initial- scale:初始缩放比例,也即是当页面第一次load的时候缩放比例。 ■ maximum-scae:允许用户缩放到的最大比例。 minimun-scae:允许用户缩放到的最小比例。 user-scalable:用户是否可以手动缩放
2.如何做移动Web开发？ Viewport 的设置？ ◼ 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： ◼ width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值， 如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 ◼ height：和 width 相对应，指定高度。 ◼ initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 ◼ maximum-scale：允许用户缩放到的最大比例。 ◼ minimum-scale：允许用户缩放到的最小比例。 ◼ user-scalable：用户是否可以手动缩放。 9
10 2如何做移动Web开发 口理解pX、em、rem三种前端常用尺寸 pX:将显示器分成非常细小的方格,每个方格就是一像素。 em:继承父级元素的字体大小 rem:继承根元素的字体大小,即为HTML的字体大小,为CSS3新增的属性。 http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281
2.如何做移动Web开发 理解px、em、rem三种前端常用尺寸 ◼ px：将显示器分成非常细小的方格，每个方格就是一像素。 ◼ em：继承父级元素的字体大小 ◼ rem：继承根元素的字体大小，即为HTML的字体大小，为CSS3新增的属性。 ◼ http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281. shtml 10