本文将带你了解WEBAPP开发之webapp前端开发经验，希望本文对大家学WEBAPP有所帮助。

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，形如：
//编码

//离线应用的另一个技巧
//隐藏状态栏
//指定的iphone中safari顶端的状态条的样式
//告诉设备忽略将页面中的数字识别为电话号码


在设置了initial-scale=1之后，我们终于可以以1:1的比例进行页面设计了。关于viewport，还有一个很重要的概念是：iphone的safari浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”，是根本没有这个功能。iphone的safari浏览器实际上从一开始就完整显示了这个网页，然后用viewport查看其中的一部分。当你用手指拖动时，其实拖的不是页面，而是viewport。浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样。
2.link:
//设置开始页面图片
//在设置书签的时候可以显示好看的图标
//肖像模式样式
<linkrel="stylesheet"media="alland(orientation:landscape)"href="landscape.css"//风景模式样式

//竖屏时使用的样式
<stylemedia="alland(orientation:portrait)"type="text/css"
#landscape{display:none;}

//横屏时使用的样式
<stylemedia="alland(orientation:landscape)"type="text/css"
#portrait{display:none;}

**3.事件：**
//手势事件
touchstart//当手指接触屏幕时触发
touchmove//当已经接触屏幕的手指开始移动后触发
touchend//当手指离开屏幕时触发
touchcancel

//触摸事件
gesturestart//当两个手指接触屏幕时触发
gesturechange//当两个手指接触屏幕后开始移动时触发
gestureend

//屏幕旋转事件
onorientationchange

//检测触摸屏幕的手指何时改变方向
orientationchange

//touch事件支持的相关属性
touches
targetTouches
changedTouches
clientX　　　　//Xcoordinateoftouchrelativetotheviewport(excludesscrolloffset)
clientY　　　　//Ycoordinateoftouchrelativetotheviewport(excludesscrolloffset)
screenX　　　//Relativetothescreen
screenY　　//Relativetothescreen
pageX　　　　//Relativetothefullpage(includesscrolling)
pageY　　　　//Relativetothefullpage(includesscrolling)
target　　　　//Nodethetoucheventoriginatedfrom
identifier　　//Anidentifyingnumber,uniquetoeachtouchevent

4.屏幕旋转事件：
onorientationchange

添加屏幕旋转事件侦听，可随时发现屏幕旋转状态（左旋、右旋还是没旋）。例子：
//判断屏幕是否旋转
functionorientationChange(){
switch(window.orientation){
　　case0:
alert("肖像模式0,screen-width:"+screen.width+";screen-height:"+screen.height);
break;
　　case-90:
alert("左旋-90,screen-width:"+screen.width+";screen-height:"+screen.height);
break;
　　case90:
alert("右旋90,screen-width:"+screen.width+";screen-height:"+screen.height);
break;
　　case180:
　　alert("风景模式180,screen-width:"+screen.width+";screen-height:"+screen.height);
　　break;
};
};

//添加事件监听
addEventListener('load',function(){
orientationChange();
window.onorientationchange=orientationChange;
});

5.隐藏地址栏&处理事件的时候，防止滚动条出现：
//隐藏地址栏&处理事件的时候，防止滚动条出现
addEventListener('load',function(){
setTimeout(function(){window.scrollTo(0,1);},100);
});

6.双手指滑动事件：
//双手指滑动事件
addEventListener('load',　　function(){window.onmousewheel=twoFingerScroll;},
false//兼容各浏览器，表示在冒泡阶段调用事件处理程序(true捕获阶段)
);
functiontwoFingerScroll(ev){
vardelta=ev.wheelDelta/120;//对delta值进行判断(比如正负)，而后执行相应操作
returntrue;
};

7.判断是否为iPhone：
//判断是否为iPhone：
functionisAppleMobile(){
return(navigator.platform.indexOf('iPad')!=-1);
};

跨平台UX设计-信任感
8.localStorage:
例子：（注意数据名称n要用引号引起来）
varv=localStorage.getItem('n')?localStorage.getItem('n'):"";
//如果名称是n的数据存在，则将其读出，赋予变量v。
localStorage.setItem('n',v);
//写入名称为n、值为v的数据
localStorage.removeItem('n');
//删除名称为n的数据

9.使用特殊链接：
如果你关闭自动识别后，又希望某些电话号码能够链接到iPhone的拨号功能，那么可以通过这样来声明电话链接,
打电话给我
发短信
或用于单元格：


10.自动大写与自动修正
要关闭这两项功能，可以通过autocapitalize与autocorrect这两个选项：


11.WebKitCSS:
①“盒模型”的具体描述性质的包围盒块内容，包括边界，填充等等。
-webkit-border-bottom-left-radius:radius;
-webkit-border-top-left-radius:horizontal_radiusvertical_radius;
-webkit-border-radius:radius;//容器圆角
-webkit-box-sizing:sizing_model;边框常量值：border-box/content-box
-webkit-box-shadow:hoffvoffblurcolor;//容器阴影（参数分别为：水平X方向偏移量；垂直Y方向偏移量；高斯模糊半径值；阴影颜色值）
-webkit-margin-bottom-collapse:collapse_behavior;常量值：collapse/discard/separate
-webkit-margin-start:width;
-webkit-padding-start:width;
-webkit-border-image:url(borderimg.gif)25252525round/stretchround/stretch;
-webkit-appearance:push-button;//内置的CSS表现，暂时只支持push-button


②“视觉格式化模型”描述性质，确定了位置和大小的块元素。
direction:rtl
unicode-bidi:bidi-override;常量：bidi-override/embed/normal

③“视觉效果”描述属性，调整的视觉效果块内容，包括溢出行为，调整行为，能见度，动画，变换，和过渡。
clip:rect(10px,5px,10px,5px)
resize:auto;常量：auto/both/horizontal/none/vertical
visibility:visible;常量:collapse/hidden/visible
-webkit-transition:opacity1slinear;动画效果ease/linear/ease-in/ease-out/ease-in-out
-webkit-backface-visibility:visibler;常量：visible(默认值)/hidden
-webkit-box-reflect:right1px;镜向反转
-webkit-box-reflect:below4px-webkit-gradient(linear,lefttop,leftbottom,
from(transparent),color-stop(0.5,transparent),to(white));
-webkit-mask-image:-webkit-gradient(linear,lefttop,leftbottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));;//CSS遮罩/蒙板效果
-webkit-mask-attachment:fixed;常量：fixed/scroll
-webkit-perspective:value;常量：none(默认)
-webkit-perspective-origin:lefttop;
-webkit-transform:rotate(5deg);
-webkit-transform-style:preserve-3d;常量：flat/preserve-3d;(2D与3D)

④“生成的内容，自动编号，并列出”描述属性，允许您更改内容的一个组成部分，创建自动编号的章节和标题，和操纵的风格清单的内容。
content:“Item”counter(section)”“;
Thisresetsthecounter.
Firstsection
>twosection
threesection
counter-increment:section1;
counter-reset:section;


⑤“分页媒体”描述性能与外观的属性，控制印刷版本的网页，如分页符的行为。
page-break-after:auto;常量：always/auto/avoid/left/right
page-break-before:auto;常量：always/auto/avoid/left/right
page-break-inside:auto;常量：auto/avoid


⑥“颜色和背景”描述属性控制背景下的块级元素和颜色的文本内容的组成部分。
-webkit-background-clip:content;常量：border/content/padding/text
-webkit-background-origin:padding;常量：border/content/padding/text
-webkit-background-size:55px;常量：length/length_x/length_y


⑦“字型”的具体描述性质的文字字体的选择范围内的一个因素。报告还描述属性用于下载字体定义。
unicode-range:U+00-FF,U+980-9FF;


⑧“文本”描述属性的特定文字样式，间距和自动滚屏。
text-shadow:#00FFFC10px10px5px;
text-transform:capitalize;常量：capitalize/lowercase/none/uppercase
word-wrap:break-word;常量：break-word/normal
-webkit-marquee:rightlargeinfinitenormal10s;常量：direction(方向)increment(迭代次数)repetition(重复)style(样式)speed(速度);
-webkit-marquee-direction:ahead/auto/backwards/down/forwards/left/reverse/right/up
-webkit-marquee-incrementt:1-n/infinite(无穷次)
-webkit-marquee-speed:fast/normal/slow
-webkit-marquee-style:alternate/none/scroll/slide
-webkit-text-fill-color:#ff6600;常量：capitalize,lowercase,none,uppercase
-webkit-text-security:circle;常量：circle/disc/none/square
-webkit-text-size-adjust:none;常量:auto/none;
-webkit-text-stroke:15px#fff;
-webkit-line-break:after-white-space;常量：normal/after-white-space
-webkit-appearance:caps-lock-indicator;
-webkit-nbsp-mode:space;常量：normal/space
-webkit-rtl-ordering:logical;常量：visual/logical
-webkit-user-drag:element;常量：element/auto/none
-webkit-user-modify:read-only;常量：read-write-plaintext-only/read-write/read-only
-webkit-user-select:text;常量：text/auto/none


⑨“表格”描述的布局和设计性能表的具体内容。
-webkit-border-horizontal-spacing:2px;
-webkit-border-vertical-spacing:2px;
-webkit-column-break-after:right;常量：always/auto/avoid/left/right
-webkit-column-break-before:right;常量：always/auto/avoid/left/right
–webkit-column-break-inside:logical;常量：avoid/auto
-webkit-column-count:3;//分栏
-webkit-column-rule:1pxsolid#fff;
style:dashed,dotted,double,groove,hidden,inset,none,outset,ridge,solid


⑩“用户界面”描述属性，涉及到用户界面元素在浏览器中，如滚动文字区，滚动条，等等。报告还描述属性，范围以外的网页内容，如光标的标注样式和显示当您按住触摸触摸
目标，如在iPhone上的链接。
-webkit-box-align:baseline,center,end,start,stretch常量：baseline/center/end/start/stretch
-webkit-box-direction:normal;常量：normal/reverse
-webkit-box-flex:flex_valuet
-webkit-box-flex-group:group_number
-webkit-box-lines:multiple;常量：multiple/single
-webkit-box-ordinal-group:group_number
-webkit-box-orient:block-axis;常量：block-axis/horizontal/inline-axis/vertical/orientation
–webkit-box-pack:alignment;常量：center/end/justify/start

12.动画过渡
这是Webkit中最具创新力的特性：使用过渡函数定义动画。
-webkit-animation:titleinfiniteease-in-out3s;
animation有这几个属性：
-webkit-animation-name：//属性名，就是我们定义的keyframes
-webkit-animation-duration：3s//持续时间
-webkit-animation-timing-function：//过渡类型：ease/linear(线性)/ease-in(慢到快)/ease-out(快到慢)/ease-in-out(慢到快再到慢)/cubic-bezier
-webkit-animation-delay：10ms//动画延迟(默认0)
-webkit-animation-iteration-count：//循环次数(默认1)，infinite为无限
-webkit-animation-direction：//动画方式：normal(默认正向播放)；alternate(交替方向，第偶数次正向播放，第奇数次反向播放)
这些同样是可以简写的。但真正让我觉的很爽的是keyframes，它能定义一个动画的转变过程供调用，过程为0%到100%或from(0%)到to(100%)。简单点说，只要你有想法，你想让元素在这个过程中以什么样的方式改变都是很简单的。
-webkit-transform:类型（缩放scale/旋转rotate/倾斜skew/位移translate）
scale(num,num)放大倍率。scaleX和scaleY(3)，可以简写为：scale(*,*)
rotate(*deg)转动角度。rotateX和rotateY，可以简写为：rotate(*,*)
Skew(*deg)倾斜角度。skewX和skewY，可简写为：skew(*,*)
translate(*,*)坐标移动。translateX和translateY，可简写为：translate(*,*)。
实现模拟弹出消息框（Alert）的例子：
①定义过渡（在段中描述keyframes）：
@-webkit-keyframesDivZoom
{
0%{-webkit-transform:scale(0.01)}
60%{-webkit-transform:scale(1.05)}
80%{-webkit-transform:scale(0.95)}
100%{-webkit-transform:scale(1.00)}
}
.sZoom{-webkit-animation:DivZoom0.5sease-in-out}
（很容易看懂，将元素从缩小的0.01倍–很小但不能为0倍，放大到1.05倍，再缩小到0.95倍，最后到1倍即正常大小。整个过渡过程事件为0.5秒，动画方式为ease-in-out，即慢到快再到慢，默认只进行1次过渡。这正是大家经常看到的iPhone弹出的提示信息的动画效果！）

②定义元素（在段中）：

使用说明

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！