WebApp开发练习3.docxVIP

Web App 开发练习3 1. viewport：也就是可视区域。对于桌面浏览器，我们都很清楚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)那么到底这些设置如何让Safari 知道？其实很简单，就一个meta，形如：meta http-equiv=Content-Typecontent=text/html; charset=utf-8 //编码meta id=viewportname=viewportcontent=width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;/meta name=”apple-mobile-web-app-capable” content=”yes” / // 离线应用的另一个技巧meta name=”apple-mobile-web-app-status-bar-style” content=black” / // 隐藏状态栏meta content=blackname=apple-mobile-web-app-status-bar-style/ //指定的iphone中safari顶端的状态条的样式meta content=telephone=noname=format-detection/ //告诉设备忽略将页面中的数字识别为电话号码meta name=Authorcontect=Mr.He/ 在设置了initial-scale=1 之后，我们终于可以以1:1 的比例进行页面设计了。关于viewport，还有一个很重要的概念是：iphone 的safari 浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”，是根本没有这个功能。iphone 的safari 浏览器实际上从一开始就完整显示了这个网页，然后用viewport 查看其中的一部分。当你用手指拖动时，其实拖的不是页面，而是viewport。浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样。(请参考：指尖的下JS 系列文章)2. link:link rel=”apple-touch-startup-image” href=”startup.png” / // 设置开始页面图片link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/ // 在设置书签的时候可以显示好看的图标link rel=stylesheetmedia=all and (orientation:portrait)href=portrait.css // 肖像模式样式link rel=stylesheetmedia=all and (orientation:landscape)href=landscape.css// 风景模式样式//竖屏时使用的样式 style media=all and (orientation:portrait)type=text/css#landscape { display: none; }/style//横屏时使用的样式 style media=all and (orientation:landscape)type=text/css#portrait { display: none; }/style 3. 事件 ： (请参考：指尖的下JS 系列文章)// 手势事件touchstart //当手指接触屏幕时触发touchmove //当已经接触屏幕的手指开始移动后触发touchend //当手指离开屏幕时触发touchcancel// 触摸事件gesturestart //当两个手指接触屏幕时触发gesturechange //当两个手指接触屏幕后开始移动时触发gestureend// 屏幕旋转事件onorienta