һ
 ¼ע

QQ¼

ֻһٿʼ

̳ WEBҳǰ뿪 WEBҳܱ

[ҳ] html5ּ

[]
14241 С 2014-7-24 17:58:29
| ʾȫ¥
1F

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

Ҫ ¼ ſػ鿴ûʺţ¼ע  

x
     undefinedֻվǰ˿ּ


IphoneAndroidţƵֻϵͳӴ˾Ͷһµ-WebApp(ΪWEBʽӦڸ߶˵ƶն豸)
Ƕ֪ڸ߶ֻϵͳӦóһǻڱأϵͳеAPPһǻڸ߶˻еWebAppĽҪߡ
WebAppNative Appкأ
Native App
1ɱdz һʹõĿΪJAVAC++Objective-C
2ϲͬʱҲȽ鷳 ÿһηµİ汾Ҫ汾Ҫûֶ£ЩӦóʹҪûֶ£ҲҪһĵʾ
3dz Ϊnative appԵIOSеUIؼUIʵWebApp޷ʵֵһЩdzĽЧ
4Native appDZAppleϿɵ Native appԱAppleϿΪһεĶԷApple StroeۣWeb appȴС

Web App
1ɱϵ ʹwebͿɵweb appĿ
2ϼ Ҫ֪ͨûڷ˸ļɣûȫûио
3άȽ һwebһάȽϼ򵥣ʵһվ
Webapp˵˾һIphoneAndroidŻwebվ㣬ʹõļ޷ǾHTMLHTML5CSS3JavaScript˼JAVAPHPASP
ȻΪЩ߶ֻIphoneAndroidǻwebkitں˵ģڿWEBAPPʱʹHTML5CSS3UI֡ʹHTML5CSS3lUIʱѭһwebʹHTML4CSS2ĿʽĻҲʧȥWEBAPPıˣЩЧҲ޷ʵֵģڴֻصǵCwebappIJַʽͼ
ڴ˵ƶƽ̨ǰ˿ָԸ߶ֻIphoneAndroidվҲWebAppֻͨWap 2.0ĶƪǰҪwebkitں˵һ˽⣬ҪHTML5CSS3һ˽⡣ѾԴ˽⣬ھͿʼĶɡ

1webkitںеһЩ˽еmetaǩЩmetaǩڿwebappʱ𵽷dzҪ

1 <meta content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0; name=viewport />
2 <meta content=yes name=apple-mobile-web-app-capable />
3 <meta content=black name=apple-mobile-web-app-status-bar-style />
4 <meta content=telephone=no name=format-detection />
һmetaǩʾǿĵĿ豸Ŀȱ1:1ĵĿȱ1.0ҲûĻŴ
ڶmetaǩiphone豸еsafari˽metaǩʾȫģʽ
metaǩҲiphone˽бǩָiphonesafari˵״̬ʽ
ĸmetaǩʾ豸ԽҳеʶΪ绰

2HTML5ǩʹ
ڿʼдwebappʱ罨ǰ˹ʦʹHTML5HTML4ΪHTML5ʵһЩHTML4޷ʵֵķḻWEBӦó飬ԼٿߺܶĹȻʹHTML5ǰһҪԴ˷dzϤҪ֪HTML5±ǩá綨һݻʹsectionǩ嵼ѡֱʹnavǩȵȡ

3CSS float
ĿпԻʾIJ֣Ӿ壬罨floatֱʹdisplay:block;

4CSS3߿򱳾
ťԲЧڷЧи߹ЧİťʹCSS3д޷дģȻԲǿʹCSS3д߹ڷȴ޷ʹCSS3дʱ㲻ʹ-webkit-border-imageťʽ-webkit-border-image͸ܸӵʽԡ

5鼶aǩ
뱣֤ÿݶһaǩУΪΪڴֻϣΪû飬ܵı֤ûĿɵϴ

6Ӧģʽ
ڱдCSSʱҲǰ˹ʦڲ㣩ĿȶΪﵽֳ豸ҽǰ˹ʦʹӦģʽ֧ӦģʽΪҳipaditouchipodiphoneandroidweb safarikchromeܹʾٴο豸ķֱʡ

7ѧʹwebkit-box
һڣ˵ӦģʽЩͬѧܻʣƶ豸ȫӦأܸлwebkitΪdisplayṩһwebkit-boxֵ԰ǰ˹ʦģơ

8ȥAndroidƽ̨жַʶ
iOS webapp APIͬѧ֪iOSṩһmetaǩ:ڽiOSҳе绰ԶʶiOSDzԶʶʼַģAndroidƽ̨ԶʼַûtouchʼַʱAndroidᵯһʾûʼ㲻AndroidԶʶҳеʼַ㲻һmetaǩheadмӣ <meta content=email=no name=format-detection />

9ȥiOSAndroidеURLĿؼ
ϰPDʦܻҪ㣺ܷǵwebappnativeappҲûǸurlĿؼ
ǿġǿһ򵥵javascriptʵЧ 1 setTimeout(scrollTo,0,0,0);

ע⣬window.onloadܹĹĵǰĵݸ߶ȱǸڴڵĸ߶ʱЧִС

10νֹûת豸
Ҳֹûת豸ҲʵijЩͻֻФģʽ򾰹ģʽ²СҿԺܸεĸ㣺!ƶwebkit

Apple webapp APIѾ˵ˣΪûsafariҳDZ뱣֤û豸κһλʱsafariܹʾҳݣҲӦǽֹֹorientationchange¼ƻ˾ijȷģƻȷʵһƻ

iOSѾֹֹorientationchange¼AndroidأԲûҵκ˵Androidֹֹorientationchange¼Androidƽ̨ȷʵҲֹ˵ġ

11μûͨwebapp
Apple webapp APIͬѧ֪iOSΪsafariṩһǰҳĹܣiphoneipodipod touchײеСӺţipadСӺţͿԽǰҳӵ豸豸Զһǰҳͼ꣬ͼͿԿ١ݵwebapp
webappwebappϷ·Ĺwebapp͸nativeappˣһwindowеnavigatorӶһstandaloneԡiOSֱӷվʱnavigator.standaloneΪfalse,webappʱnavigator.standaloneΪtrue ǿͨnavigator.standaloneԻ֪ûǰǷǴǵwebappġAndroidдûӵ£

12ιرiOSмԶд
֪iOSУ̵ʱĬ¼ǿĸдĹܵģijЩҵ񳡾Ҫرܣƶ汾webkitΪinputԪṩautocapitalizeԣָͨautocapitalize=offرռĬĸд

13iOSγ׽ֹû´ڴҳ
ʱǿҪֹû´ڴҳ棬ǿʹaǩtarget=_selfָû´ڴ򿪣targetԱֿգᷢiOSûӵϷ3ӺiOSᵯһбťûͨЩťȻ´ڴҳ棬ĻָtargetԾʧЧˣǿָͨǰԪص-webkit-touch-calloutʽΪnoneֹiOSЩťɽiOSAndroidƽ̨Ч

14iOSνֹûͼƬܸͼƬ
ڵ13ᵽԪص-webkit-touch-calloutԣͬΪһimgǩָ-webkit-touch-calloutΪnoneҲֹ豸бťû޷ܸͼƬˡ

15iOSνֹûѡ
ֱָͨǩ-webkit-user-selectΪnoneԽֹiOSûѡ֡

16iOSλȡֵ
Ҫȡֵͨdocument.scrollTopdocument.scrollLeftõģiOSᷢδģΪʲôأΪiOSûйĸAndroidͨԿȡֵôiOSǸλȡֵأ ͨwindow.scrollYwindow.scrollXǿԵõǰڵyxֵ

17νӱ߿
ָһ鼶ԪʱΪ䶨˱߿Ϊ100ƶ豸ͨıΪ100䶨Ϊ鼶ԪʵȫӦʽʱ֣ᷢԪصı߿()1ػĵ³ֺΪһ⣬ǿΪһʽ-webkit-box-sizing:border-box;ָúӵĴС߿Ŀȡ

18νAndroid 2.0ƽ̨Բǵ
ҹϸĵĻwapվ㿪ʱӦûᷢandroid 2.0µƽ̨رĶ࣬˵߿Բɡ ڶһԪضԲʱΪȫandroid 2.0µƽ̨DZҪ¼߿Բǣ
1-webkitǰ׺ҪϣiOSУԲӣandroidһҪӣ
2Ա߿ʽ壬border:1px solid #000;ô-webkit-border-radiusԱҪborderԺ
3ܼӾԪأϽǺϽԲʱDZҪȶȫֵ(4ǵԲֵ)-webkit-border-radius:5px;Ȼεĸ½Ǻ½ǣ-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-border:0;android 2.0µƽ̨нȫʾֱǣмס-webkitǰ׺һҪϣ

19νandroidƽ̨ҳ޷Ӧ
ȻhtmlcssȫӦģһ㷢ҳandroidʾIJӦʱȷheadǩǷmetaǩ
<meta name=viewport content=width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0; />
еĻϸĿûԵֵwidth=device-widthûϰɣ

20νiOS 4.3汾safariҳ5λֵԶʶԶʽ
µiOSϵͳҲ4.3汾safariһbugʹµmetaǩsafariȻҳе5λֽԶʶ𣬲ҽȾʽҲ˵cssԸñǩЧġ
<meta name=format-detection content=telphone=no />
ǿһȽİ취˵֧wapվʾıǩǶ¸д
<button class=t-balancestyle=background:none;padding:0;border:0;>95009.00</button>Ԫ

---------------лл񣬣δɹͬ־Ŭ------------------------------

,
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
ڰka 2015-1-23 14:49:15
| ʾȫ¥
2F
۹˾ڸ߼ҳ    ϵͳװ WIFIҳ ţ
hao123 60-90Ԫ 1000IP ܽᡢ½ᣩ
ɽԵ 50-70 1000IP ܽᣩ
360 40-75 1000IP ܽᡢ½ᣩ
2345 ѹ  ٶֳ ѹ  
ƶ ƶ  Ϸֳɵ WIFIҳ
ʵˢšϵQ:739=559=406

20150123












˾ڸ߼ HAO123 ɽ 360ȵ   ṩٷͳƺ̨
ʵˢšϵQ:739=559=406
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
б

ֹ

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

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

GMT+8, 2019-10-20 17:20

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б