һ
 ¼ע

QQ¼

ֻһٿʼ

̳ WEBҳǰ뿪 WEBҳܱ

[ҳ] ƶwebAPPǰ˿ʾͼɻ

[]
11930 happy175 2014-11-17 11:51:36
| ʾȫ¥
1F

ϵ½עᣬύѣø๦ܣϴزIJޣ

Ҫ ¼ ſػ鿴ûʺţ¼ע  

x
1. viewportwebappͼ
Ҳǿ򡣶Ƕviewportʲôdzȥй״̬ȵ֮ڿҳ
Чƶ豸ĻȲͬڴͳ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磺

  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   //
  2. <meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>
  3. <meta name=apple-mobile-web-app-capable content=yes />  // Ӧһ   
  4. <meta name=apple-mobile-web-app-status-bar-style content=black />  // ״̬      
  5. <meta content="black" name="apple-mobile-web-app-status-bar-style" /> //ָiphonesafari˵״̬ʽ      
  6. <meta content="telephone=no" name="format-detection" />       //豸ԽҳеʶΪ绰     
  7. <meta name="Author" contect="Mr.He"/ >
ƴ


initial-scale=1 ֮ڿ1:1 ıҳˡviewportһҪĸǣiphone safari ȫûйҲǼ򵥵ġعǸûܡiphone safari ʵϴһʼʾҳȻviewport 鿴еһָ֡϶ʱʵϵIJҳ棬viewportΪĸı䲻ֹǹ¼Ҳͨ治һ

2. link:ʽӺʾ

<link rel=apple-touch-startup-image href=startup.png /> // ÿʼҳͼƬ
<link rel=apple-touch-icon href=iphon_tetris_icon.png/> // ǩʱʾÿͼ
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">    // Фģʽʽ      
<link rel="stylesheet" media="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. ƶ˴¼

// ¼
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

Ļת¼ʱĻת״̬ûӣ
  1. // жĻǷת
  2. function orientationChange() {
  3.     switch(window.orientation) {
  4.     case 0:
  5.             alert("Фģʽ 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
  6.             break;
  7.     case -90:
  8.             alert(" -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
  9.             break;
  10.     case 90:   
  11.             alert(" 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
  12.             break;
  13.     case 180:   
  14.         alert("羰ģʽ 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
  15.         break;
  16.     };};
  17. // ¼
  18. addEventListener('load', function(){
  19.     orientationChange();
  20.     window.onorientationchange = orientationChange;
  21. });
ƴ


5. صַ & ¼ʱ򣬷ֹ֣

  1. // صַ  & ¼ʱ ֹ
  2. addEventListener('load', function(){
  3.         setTimeout(function(){ window.scrollTo(0, 1); }, 100);
  4. });
ƴ


6. ˫ָ¼

  1. // ˫ָ¼
  2. addEventListener('load',function(){ window.onmousewheel = twoFingerScroll;},
  3.      false              // ݸʾðݽ׶ε¼ (true ׶)
  4. );
  5. function twoFingerScroll(ev) {
  6.     var delta =ev.wheelDelta/120;              // delta ֵж() ִӦ
  7.     return true;
  8. };
ƴ


7. жǷΪiPhone

  1. // жǷΪ iPhone
  2. function isAppleMobile() {
  3.     return (navigator.platform.indexOf('iPad') != -1);
  4. };
ƴ


8. localStorage:

ע  n  Ҫ
  1. var v = localStorage.getItem('n') ? localStorage.getItem('n') : "";   //   n ݴ   v  
  2. localStorage.setItem('n', v);                                           // дΪ nֵΪ  v  
  3. localStorage.removeItem('n');                                           // ɾΪ  n     
ƴ



9. ʹӣ

رԶʶ ϣijЩ绰ܹӵ iPhone IJŹ ôͨ绰 ,
  1. <a href="tel:12345654321">绰</a>
  2. <a href="sms:12345654321"></a>
ƴ


ڵԪ
  1. <td onclick="location.href='tel:122'">
ƴ



10. ԶдԶ

Ҫرܣͨautocapitalize autocorrect ѡ

  1. <input type="text" autocapitalize="off" autocorrect="off" />
ƴ



ƶAPPƺwebAPPеС

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;

ݡҳý塱۵ԣӡˢ汾ҳҳΪ
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

ᡰIJֺܱľݡ
-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ӣ

ٶɣ<style type=text/css>keyframes
  1. @-webkit-keyframes DivZoom
  2. {
  3. 0% { -webkit-transform: scale(0.01) }
  4. 60% { -webkit-transform: scale(1.05) }
  5. 80% { -webkit-transform: scale(0.95) }
  6. 100% { -webkit-transform: scale(1.00) }
  7. }
  8. .sZoom { -webkit-animation: DivZoom 0.5s ease-in-out }
ƴ


׿ԪشС0.01 CСΪ0 Ŵ1.05 С0.951 Сɹ¼Ϊ0.5 룬ʽΪease-in-outٵĬֻ1 ιɡǴҾ iPhone ʾϢĶЧ

ڶԪأ<body>У
  1. <div id="layerH" style="-webkit-border-radius:12px; border:2px solid #FFF;-webkit-box-shadow: 0px 2px 4px #888;position: absolute; left: 24px; top: 106px;
  2. width: 256px; height: 268px; padding-left: 8px; padding-right: 8px;color: #FFFFFF; text-shadow: 1px 1px 1px #000; text-align: center;background-color: RGBA(32,48,96,0.9);
  3. background-image:url('BG-Msg.png'); background-repeat:no-repeat;
  4. z-index: 1; visibility: hidden; ">
  5. <p><span style="font-size: 16pt; font-weight: bold">ʹ˵</span></p>
  6. <hr noshade size="1">
  7. <div id="HelpText" style="height: 120px">˵</div>
  8. <hr noshade size="1">
  9. <form name="formV" method="POST">
  10. <input type="button" value="ȷ" name="B1"
  11. style="width: 100%; height: 40px; font-size: 14pt; ont-weight: bold;
  12. color: #FFFFFF; text-shadow: 0px -1px 1px #000;"
  13. onclick=" layerH.style.visibility='hidden'">
  14. </form>
  15. </div>
ƴ


javascript ĺУ
  1. function pHelp()
  2. {
  3. layerH.style.visibility = 'visible'
  4. layerH.style.cssText = "-webkit-animation-delay: " + Math.random() + "ms"
  5. layerH.className = 'sZoom'
  6. }
ƴ


(ͺܺˡΪʲôҪʹ-webkit-animation-delay أΪһԪعʾɺʽûб仯һν޷йɶʾ䶯ӳʱ䶨壬ʹ仯ͱ⡣ʹMath.random()һ0 С1 Ȼӳ㼸룬ûDzġ)

webAPP֪ʶ䣺

1. viewport

ontouchmove="event.preventDefault()" //viewportκĻƶû棨̳⣩
2. Ԫص۱仯ʹʽ趨
-webkit-tap-highlight-color: ɫ
3. iPhone/iPod
ض豸ƶվҪľ豸ˡʹJavascriptiPhone/iPodUAȻתרURL
  1. if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
  2. if (document.cookie.indexOf("iphone_redirect=false") == -1) {
  3. window.location = "http://m.example.com";
  4. }
  5. }
ƴ


ȻJavascriptǿˮ豸еģûǿԽáҲɿͻˢºͶݴ䣬Ƿת
  1. if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
  2. header('Location: <a href="http://yoursite.com/iphone'" target="_blank">http://yoursite.com/iphone'</a>);
  3. exit();
  4. }
ƴ


4. ֹתĻʱԶС
  1. html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
ƴ


5. iPhoneʶCSS
豸⣬CSSýѯרΪiPhone/iPodʽ
  1. @media screen and (max-device-width: 480px) {}
ƴ


6. СͼƬ
վĴͼͨȶ480أǰĴţЩͼƬiPhoneʾȻᳬĻiPhoneܻǿCSSiPhoneԶͼƬСʾ
  1. @media screen and (max-device-width: 480px){
  2. img{max-width:100%;height:auto;}
  3. }
ƴ


7. ģ:hoverα
ΪiPhoneûָ룬ûhover¼ôCSS :hoverαûˡiPhoneTouch¼onTouchStart onMouseOveronTouchEnd onMouseOutǿģhoverʹJavascript
  1. var myLinks = document.getElementsByTagName('a');
  2. for(var i = 0; i < myLinks.length; i++){
  3. myLinks.addEventListener(touchstart, function(){this.className = hover;}, false);
  4. myLinks.addEventListener(touchend, function(){this.className = ;}, false);
  5. }
ƴ


ȻCSShoverЧ
  1. a:hover, a.hover { /* hoverЧ */ }
ƴ


һӣоԸťңģκԪϡƶAPPƺwebAPPеСɺWebAPPƺſҪע5



, , ״̬, ,
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
б

ֹ

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2019-10-20 16:34

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б