本文共 11283 字,大约阅读时间需要 37 分钟。
如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切。接触 webkit 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)
//编码 // 离线应用的另一个技巧 // 隐藏状态栏 //指定的iphone中safari顶端的状态条的样式 //告诉设备忽略将页面中的数字识别为电话号码
// 设置开始页面图片 // 在设置书签的时候可以显示好看的图标 // 肖像模式样式 #landscape { display: none; }//横屏时使用的样式
// 手势事件touchstart //当手指接触屏幕时触发touchmove //当已经接触屏幕的手指开始移动后触发touchend //当手指离开屏幕时触发touchcancel// 触摸事件gesturestart //当两个手指接触屏幕时触发gesturechange //当两个手指接触屏幕后开始移动时触发gestureend// 屏幕旋转事件 onorientationchange // 检测触摸屏幕的手指何时改变方向 orientationchange // touch事件支持的相关属性touches targetTouches changedTouches clientX // X coordinate of touch relative to the viewport (excludes scroll offset) clientY // Y coordinate of touch relative to the viewport (excludes scroll offset) screenX // Relative to the screen screenY // Relative to the screen pageX // Relative to the full page (includes scrolling) pageY // Relative to the full page (includes scrolling) target // Node the touch event originated from identifier // An identifying number, unique to each touch event
// 判断屏幕是否旋转function orientationChange() { switch(window.orientation) { case 0: alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height); break; case -90: alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height); break; case 90: alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height); break; case 180: alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height); break; };};// 添加事件监听 addEventListener('load', function(){ orientationChange(); window.onorientationchange = orientationChange; });
// 隐藏地址栏 & 处理事件的时候 ,防止滚动条出现addEventListener('load', function(){ setTimeout(function(){ window.scrollTo(0, 1); }, 100); });
// 双手指滑动事件addEventListener('load', function(){ window.onmousewheel = twoFingerScroll;}, false // 兼容各浏览器,表示在冒泡阶段调用事件处理程序 (true 捕获阶段)); function twoFingerScroll(ev) { var delta =ev.wheelDelta/120; //对 delta 值进行判断(比如正负) ,而后执行相应操作 return true; };
// 判断是否为 iPhone : function isAppleMobile() { return (navigator.platform.indexOf('iPad') != -1); };
var v = localStorage.getItem('n') ? localStorage.getItem('n') : ""; // 如果名称是 n 的数据存在 ,则将其读出 ,赋予变量 v 。 localStorage.setItem('n', v); // 写入名称为 n、值为 v 的数据 localStorage.removeItem('n'); // 删除名称为 n 的数据
-webkit-border-bottom-left-radius: radius;-webkit-border-top-left-radius: horizontal_radius vertical_radius;-webkit-border-radius: radius; //容器圆角-webkit-box-sizing: sizing_model; 边框常量值:border-box/content-box-webkit-box-shadow: hoff voff blur color; //容器阴影(参数分别为:水平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) 25 25 25 25 round/stretch round/stretch;-webkit-appearance: push-button; //内置的CSS 表现,暂时只支持push-button
direction: rtlunicode-bidi: bidi-override; 常量:bidi-override/embed/normal
clip: rect(10px, 5px, 10px, 5px)resize: auto; 常量:auto/both/horizontal/none/verticalvisibility: visible; 常量: collapse/hidden/visible-webkit-transition: opacity 1s linear; 动画效果 ease/linear/ease-in/ease-out/ease-in-out-webkit-backface-visibility: visibler; 常量:visible(默认值)/hidden-webkit-box-reflect: right 1px; 镜向反转-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom,from(transparent), color-stop(0.5, transparent), to(white));-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 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: left top;-webkit-transform: rotate(5deg);-webkit-transform-style: preserve-3d; 常量:flat/preserve-3d; (2D 与3D)
content: “Item” counter(section) ” “;This resets the counter.First section>two sectionthree sectioncounter-increment: section 1;counter-reset: section;
page-break-after: auto; 常量:always/auto/avoid/left/rightpage-break-before: auto; 常量:always/auto/avoid/left/rightpage-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: #00FFFC 10px 10px 5px;text-transform: capitalize; 常量:capitalize/lowercase/none/uppercaseword-wrap: break-word; 常量:break-word/normal-webkit-marquee: right large infinite normal 10s; 常量: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: 1px solid #fff;style:dashed,dotted,double,groove,hidden,inset,none,outset,ridge,solid
-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
-webkit-animation: title infinite ease-in-out 3s;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(交替方向,第偶数次正向播放,第奇数次反向播放)
-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(* , *)。
@-webkit-keyframes DivZoom{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: DivZoom 0.5s ease-in-out }
使用说明
说明文字
function pHelp(){layerH.style.visibility = 'visible'layerH.style.cssText = "-webkit-animation-delay: " + Math.random() + "ms"layerH.className = 'sZoom'}
ontouchmove="event.preventDefault()" //锁定viewport,任何屏幕操作不移动用户界面(弹出键盘除外)。
-webkit-tap-highlight-color: 颜色
3. 侦测iPhone/iPod
开发特定设备的移动网站,首先要做的就是设备侦测了。下面是使用Javascript侦测iPhone/iPod的UA,然后转向到专属的URL。if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { if (document.cookie.indexOf("iphone_redirect=false") == -1) { window.location = "http://m.example.com"; }}
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) { header('Location: http://yoursite.com/iphone'); exit();}
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
@media screen and (max-device-width: 480px) {}
@media screen and (max-device-width: 480px){ img{max-width:100%;height:auto;}}
var myLinks = document.getElementsByTagName('a');for(var i = 0; i < myLinks.length; i++){ myLinks[i].addEventListener(’touchstart’, function(){this.className = “hover”;}, false); myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);}
a:hover, a.hover { /* 你的hover效果 */ }
转载地址:http://wvfli.baihongyu.com/