最新资讯当前位置:星鸿娱乐 > 最新资讯 > >

手机开发必备技巧:javascript及CSS功能代码分享

  

[手机开发,javascript,CSS,功能代码]手机开发必备技巧:javascript及CSS功能代码分享

  

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磺  
   :
  
   //  
    
   // ???

  
   // ??

  
   //?iphonesafari????

  
   //豸??е??绰  
    
  

  
  initial-scale=1 ??1:1 ???viewport????iphone safari ??й?????????iphone safari ???????viewport ?е?????????棬viewport?????????治?

  

  

2. link:  
   :

  
   // ?????

  
   // ?????

  
   // Ф???

  
  

  
  
  //????

  
    
  
  //????

  
    
  

  

  

3. ?   
   :

  
  // ?

  
  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  
  

  

  

4. ???onorientationchange  
  ??????????

  
   :

  
  // ж???

  
  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;  
  });  
  

  

  

5. ?? & ??????  
   :

  
  // ?? & ?? ?

  
  addEventListener('load', function(){  
  setTimeout(function(){ window.scrollTo(0, 1); }, 100);  
  });  
  

  

  

6. ???

  
   :

  
  // ???

  
  addEventListener('load',function(){ window.onmousewheel = twoFingerScroll;},  
  false // ??e??ε? (true ?)  
  );  
  function twoFingerScroll(ev) {  
  var delta =ev.wheelDelta/120; // delta ?ж() ??

  
  return true;  
  };  
  

  
  7. ж??iPhone  
   :
  
  // ж?? iPhone  
  function isAppleMobile() {  
  return (navigator.platform.indexOf('iPad') != -1);  
  };  
  
  

  

8. localStorage:  

  

? n ?

  
   :

  
  var v = localStorage.getItem('n') ? localStorage.getItem('n') : ""; // n ? v  
  localStorage.setItem('n', v); // д? n?? v  
  localStorage.removeItem('n'); // ?? n  
  
  
  9. ??  
  ??? ??Щ绰?? iPhone ?? ??绰 ,  
   :
  
  绰  
  
  
  
  ??

  
   :

  
    
  
  

  

10. ?д?  
  ?????autocapitalize autocorrect ??

  
   :

  
    
  
  

  

11. WebKit CSS:  
  ??????Χп??磬??

  
   :

  
  -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: 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: 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 section  
  three section  
  counter-increment: section 1;  
  counter-reset: section;  
  

  
  ??y塱????汾???

  
   :

  
  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: #00FFFC 10px 10px 5px;  
  text-transform: capitalize; capitalize/lowercase/none/uppercase  
  word-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  
  Cwebkit-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  
  
  
  ??桱?漰??У??滹?Χ???????

  
  ??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  
  Cwebkit-box-pack: alignment; center/end/justify/start  
  
  

  

12.   
  Webkit ???ù?嶯  
   :

  
  -webkit-animation: title infinite ease-in-out 3s;  
  animation ??

  
  -webkit-animation-name //?keyframes  
  -webkit-animation-duration3s //?

  
  -webkit-animation-timing-function //?ease/ linear() /ease-in()/ease-out(?) /ease-in-out(?) /cubic-bezier  
  -webkit-animation-delay10ms //?(?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?

  
  ??