???????META/LINK????
????1???????????
??????????????????????????????????????????????????????????棬??????????????????????????meta????????????
????<meta http-equiv="Cache-Control" content="no-siteapp" />
????????????SiteApp ???????
????2????????????????IOS??
????<meta name="apple-mobile-web-app-title" content="????">
????3?????? WebApp ???????IOS??
???????????????????????????????????????????????????????????????????????д?Ч????
????<meta name="apple-mobile-web-app-capable" content="yes" />
????<meta name="apple-touch-fullscreen" content="yes" />
????PS???????????????5S?????????”apple-touch-fullscreen”????????????????????????????????
????4????????????????????IOS??
??????????????????????????? ”apple-mobile-web-app-capable” content=”yes” ???Ч
????<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
????content ??????
????default ????????????????
????black ????????????????
????black-translucent ?????????????????? ???????? default ?? black ?????????????????????? ???????? black-translucent ????????????????????????????????????
????6?????????????????IOS??
?????? iOS Safari ?????????????Android????????????Щ??????????綽??????????????綽????????磺
????7λ????????磺1234567
???????????????????????磺(+86)123456789
????????????????????磺00-00-00111
????11λ????????磺13800138000
???????????????????????????????????????????μ?meta?????綽???????????
????<meta name="format-detection" content="telephone=no" />
???????Щ???????綽?????????????Щ?綽??????????????? iPhone ????????????????????????????????????
??????2??????綽?????
????<a href=”tel:123456″>123456</a>
??????3?????????????
????<a href=”sms:123456″>123456</a>
????7??????????????Android??
??????綽?????????????????????????????????????????????????????????μ?meta????????????????
????<meta content=”email=no” name=”format-detection” />
????????????????????????????????????????????????????????????
????<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
????8????????? App ????? Smart App Banner??IOS 6+ Safari??
????<meta name=”apple-itunes-app” content=”app-id=myAppStoreID?? affiliate-data=myAffiliateData?? app-argument=myURL”>
????9??IOS Web app???????
????????iPad ??????????????????????????????????????????????????????????????20px??С?????????retina?豸??????40px???С
????<!-- iPhone -->
????<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
????<!-- iPhone (Retina) -->
????<link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
????<!-- iPad (portrait) -->
????<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
????<!-- iPad (landscape) -->
????<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
????<!-- iPad (Retina?? portrait) -->
????<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
????<!-- iPad (Retina?? landscape) -->
????<link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
??????landscape?????? | portrait????????
????10?????????????APP???
???????web app??????????????·??????????????????????
????<!-- ????? -->
????<link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">
????<!-- ?????Ч?? -->
????<link href="short_cut_114x114.png" rel="apple-touch-icon">
????apple-touch-icon????IOS6?????μ?汾?????????????????Ч????IOS7???????????????????
????apple-touch-icon-precomposed?????“????????”
????Ч????

????????磺
????????????size?????????????豸????????????????????????????????114 x 114 pixels??С??????? ??
??????????????
????Create different sizes of your app icon for different devices. If you’re creating a universal app?? you need to supply app icons in all four sizes.
????For iPhone and iPod touch both of these sizes are required:
????57 x 57 pixels
????114 x 114 pixels (high resolution)
????For iPad?? both of these sizes are required:
????72 x 72 pixels
????144 x 144 (high resolution)
????11??????????°汾 IE ?? Chrome
????<meta http-equiv="X-UA-Compatible" content="IE=edge??chrome=1" />
????????HTML/CSS
????1?????iOS??????????????д
??????iOS?У????????????????????????д????????????????????????????????
????<input type="text" autocapitalize="off" />
????2?????iOS???????????
??????????????????????????д??????IOS?????????????????????????????????????????????????????????????????Ρ????????????????????????????input??????????????
????<input type="text" autocorrect="off" />
????3????????????
??????????豸???????л??????????С??????????????????????????????????????????????????????
????html {
????-webkit-text-size-adjust: ;
????}
??????????????PC??????????????????????????????????Ч?????????? `meta viewport’??
????4???????????????????????
??????iOS????????????????????????????? box-shadow ????????????????????????????????
????input??
????textarea {
????border: 0; /* ????1 */
????-webkit-appearance: none; /* ????2 */
????}
????5????????????
???????????????????????????????????????????
???????????????????????????????body?????????????????????? iScroll;
????Android 3.0/iOS??????body????????????????????????????iOS????????2????????й?????
????Android 4.0????????????????????????????????Ч??????????????????????????
????iOS??5.0???????????????????????????????????Ч??
??????iOS?????????????????????? Native ?????Ч?????????????????
????.xxx {
????overflow: auto; /* auto | scroll */
????-webkit-overflow-scrolling: touch;
????}
????PS??iScroll?ù????о???????????Щ?????bug???????????????? iDangero Swiper????????????????????????????????3D??????????л???????????ù???????????????
????http://www.idangero.us/sliders/swiper/index.php
????6????????????????
?????????????????????????е????????????????css?н????
????.user-select-none {
????-webkit-user-select: none;  /* Chrome all / Safari all */
????-moz-user-select: none;     /* Firefox all ????????????? */
????-ms-user-select: none;      /* IE 10+ */     
????}
????7??????????touch????Ч??
???????????????????????????a??????????????????????????α?? :active ???????????????????????????????????????????????????????????css???·?????????????????
????html {
????-webkit-tap-highlight-color: rgba(0?? 0?? 0?? 0);
????}
???????????????????????????Ч?????????Э???????????????????????a?????????????????????????????
????8????ν????????????IOS??
????????????????????pad???????? img ????????? ?洢??? ???? ??????????????????????????????????????????·??????????
????img { -webkit-touch-callout: none; }