## 一、META標簽 頁面縮放 ~~~ <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> ~~~ 禁止iphone識別電話及郵箱 ~~~ <meta content="telephone=no" name="format-detection" /> <meta content="email=no" name="format-detection" /> ~~~ iphone狀態欄樣式 ~~~ <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可選default、black、black-translucent --> ~~~ ## 二、打電話發短信 ~~~ <a href="tel:020-11811922">打電話給:0755-10086</a> <a href="sms:10086">發短信給: 10086</a> <a href="mailto:123456@qq.com">123456@qq.com</a> ~~~ ## 三、css3過渡動畫開啟硬件加速 ~~~ .xxx{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } ~~~ ## 四、點擊事件 由于click事件有300ms的延遲，以至事件不靈活，造成體驗不友好，可以使用touch事件來代替（touchstart/touchend） ## 五、圖片優化 * 圖標過多的話，盡量使用字體圖標 * 圖標少的話，如果使用了圖片，那么盡量合到一個圖片里，通過background引入、再配合background-size來改大小 * 小圖片的話可以使用base64編碼圖片來代替url圖片，以減少請求 * 圖片懶加載，只加載可視區的圖片，其他的跟據滾動來加載，但這個會導致dom的重排，具體看項目需求了 ## 六、禁止用戶選擇 ~~~ body { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } ~~~ 注：如果遇到彈層關閉有遺留的話，可以讓彈層相對于body來定位 ## 七、謹慎使用fixed定位 iphone下fixed定位不識別或定位錯誤，不知道新版本會如何，具體還要在真機上看。。 ## 八、消除transition閃屏 ~~~ .xxx { -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } ~~~ ## 九、去除iphone上元素tap默認效果 ~~~ a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)} ~~~ ## 十、iphone-x齊劉海解決方案 給body加個背景色 ~~~ body{background-color: '#9AC130';} ~~~ 使用 [viewport-fit](https://drafts.csswg.org/css-round-display/#descdef-viewport-viewport-fit) 設置visual viewport大小 可選 * auto：這個值不影響初始布局視窗，整個Web頁面是可視的。在視窗之外的UA繪制的是未定義的，它可能是畫布的背景色，或者是UA認為合適的其他東西。 * contain：最初的布局視窗和視覺布局視窗被設置為最大的矩形。在Viewport之外的UA繪制的是未定義的，它可能是畫布的背景色，或者UA認為合適的其他東西。 * cover：初始布局視窗和視覺布局視窗被設置為設備物理屏幕的限定矩形。 ~~~ <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> ~~~ 也可以這樣 ~~~ @viewport(viewport-fit: contain) { /* CSS for rect */ } ~~~ 或這樣 ~~~ @viewport { viewport-fit: cover; } @media(shape: round) { /* CSS for round */ } @media(shape: rect) { /* CSS for rect */ } ~~~ 使用safe-area-inset-* 針對iphone-x的形狀不規則，apple添加的一個方法將安全區域布局暴露給CSS。這個方法叫[CSS constants](https://github.com/w3c/csswg-drafts/issues/1693) constant()函數可選參數 * constant(safe-area-inset-top)：在viewport頂部的安全區域內設置（CSS像素） * constant(safe-area-inset-bottom)：...底部的安全區域設置（CSS像素） * constant(safe-area-inset-left)：...左側的安全區域設置（CSS像素） * constant(safe-area-inset-right)：...右側的安全區域設置（CSS像素） ~~~ padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left) ~~~ 這完全解決了在菜單上和社交媒體圖標上的問題  對于不知道如何解決constant()語法的舊設備來說，你可以做一個降級的處理，使用[calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)方法，也可以借用[@supports](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)來實現 ~~~ @supports(constant(safe-area-inset-top)) { header { /* status bar height on IOS 11+ */ padding-top: constant(safe-area-inset-top) } } ~~~ 其他文章參考：[關于H5頁面在iPhoneX適配](https://www.cnblogs.com/lolDragon/p/7795174.html) ## 十一、布局單位 rem（font size of the root element）是指相對于根元素(html)的字體大小的單位。 ~~~ html{ font-size: 62.5%; } body{ font-size: 1.2rem; } .xxx{ font-size: 1.4rem; } ~~~ vw和vh（viewport的寬度和高度） vh等于viewport高度的1/100.例如，如果瀏覽器的高是900px,1vh求得的值為9px。同理，如果顯示窗口寬度為750px,1vw求得的值為7.5px。 ~~~ .xxx{ height: 100vh; } ~~~ [七個你可能不了解的CSS單位](http://www.w3cplus.com/css/7-css-units-you-might-not-know-about.html) ## 十二、字體 ~~~ html{ font-family: "Microsoft YaHei","Droidsansfallback","HelveticaNeue","黑體","monospace", "sans-serif", "serif"; } ~~~ ## 十三、javascript與android、IOS交互 [DSBridge](http://www.dsbridge.com/index.html)：[最好用的跨平臺Js bridge新秀-DSBridge Ios篇](http://www.jianshu.com/p/3946605109ed) ## 十四、添加到主屏后的標題（IOS） ~~~ <meta name="apple-mobile-web-app-title" content="飛常準" /> ~~~ ## 十五、全屏模式（IOS） ~~~ <meta name="apple-touch-fullscreen" content="yes" /> ~~~ ## 十六、隱藏狀態欄和工具欄（IOS） ~~~ <meta name="apple-mobile-web-app-cappable" content="yes" /> ~~~ ## 十七、禁止百度轉碼，添加廣告 ~~~ <meta http-equiv="Cache-Control" content="nositeapp" /> ~~~ ## 十八、啟動動畫（IOS） 由于iPad 的啟動畫面是不包括狀態欄區域的。所以啟動圖片需要減去狀態欄區域所對應的方向上的20px大小，相應地在retina設備上要減去40px的大小。 ~~~ <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image"> <link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"> <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"> <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"> <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"> ~~~ ## 十九、添加到主屏后的APP圖標 ~~~ <!-- 設計原圖 --> <link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed"> <!-- 添加高光效果 --> <link href="short_cut_114x114.png" rel="apple-touch-icon"> ~~~ ## 二十、優先使用IE edge 或 chrome ~~~ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> ~~~ ## 二一、font-family （Helvetica在IOS、Android、winPhone系統上都支持） ~~~ * /* 移動端定義字體的代碼 */ * body{font-family:Helvetica;} ~~~ ## 二二、winphone系統a、input標簽被點擊時去掉半透明灰色背景 ~~~ <meta name="msapplication-tap-highlight" content="no"> ~~~ ## 二三、webkit表單元素的默認外觀怎么重置 ~~~ input{-webkit-appearance: none;} ~~~ ## 二四、關閉iOS鍵盤首字母自動大寫 ~~~ <input type="text" autocapitalize="off" /> ~~~ ## 二五、關閉iOS輸入自動修正 ~~~ <input type="text" autocorrect="off" /> ~~~ ## 二六、禁止文本縮放 ~~~ html{ -webkit-text-size-adjust: 100%; } ~~~ ## 二七、快速回彈滾動 ~~~ .xxx { overflow: auto; /* auto | scroll */ -webkit-overflow-scrolling: touch; } ~~~ ## 二八、禁止保存或拷貝圖片（IOS） ~~~ img { -webkit-touch-callout: none; } ~~~ ## 二九、屏幕旋轉的事件和樣式 事件 ~~~ window.onorientationchange = function(){ switch(window.orientation){ case -90: case 90: alert("橫屏:" + window.orientation); break; case 0: case 180: alert("豎屏:" + window.orientation); break; } } ~~~ 樣式 ~~~ /*豎屏時使用的樣式 */ @media all and (orientation:portrait) { .css{} } /*橫屏時使用的樣式*/ @media all and (orientation:landscape) { .css{} } ~~~ ## 三十、上傳圖片或視頻 ~~~ <!-- 選擇照片 --> <input type=file accept="image/*"> <!-- 選擇視頻 --> <input type=file accept="video/*"> ~~~ ## 三一、android去掉語音輸入按鈕 ~~~ input::-webkit-input-speech-button { display: none } ~~~ ## 三二、日期選擇彈出鍵盤解決方案（IOS） 1、把input換成div 2、允許的話可以加disabled屬性 3、禁止獲取焦點 ~~~ <input type="text" value="" onfocus="this.blur()"> ~~~ ## 三三、針對safari瀏覽器的滾動優化 ~~~ .zh-container { overflow: scroll; -webkit-overflow-scrolling: touch; } ~~~ ## 三四、UC應用模式 ~~~ <meta name="browsermode" content="application"> ~~~ ## 三五、QQ應用模式 ~~~ <meta name="x5-page-mode" content="app"> ~~~ ## 三六、QQ強制全屏 ~~~ <meta name="x5-fullscreen" content="true"> ~~~ ## 三七、QQ強制豎屏 ~~~ <meta name="x5-orientation" content="portrait"> ~~~ ## 三八、UC強制全屏 ~~~ <meta name="full-screen" content="yes"> ~~~ ## 三九、微軟的老式瀏覽器 ~~~ <meta name="MobileOptimized" content="320"> ~~~ ## 四十、針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 ~~~ <meta name="HandheldFriendly" content="true"> ~~~ ## 四一、啟用360瀏覽器的極速模式(webkit) ~~~ <meta name="renderer" content="webkit"> ~~~ ## 四二、添加到主屏后的標題（iOS 6 新增） ~~~ <meta name="apple-mobile-web-app-capable" content="yes"/> ~~~ ## 四三、 搜索引擎抓取 ~~~ <meta name="robots" content="index,follow"/> ~~~ ## 四四、安全策略 ~~~ <meta http-equiv="Content-Security-Policy" content="default-src 'none'; base-uri 'self'; connect-src 'self'; form-action 'self'; img-src 'self' data:; script-src 'self'; style-src 'unsafe-inline'"> ~~~ ## 四五、shrink-to-fit 這個shrink-to-fit=no屬性是蘋果專屬的，在Safari IOS9開始引入，安卓以及其他系統沒有 ## 四六、pointer-events 指針事件，當為none的時候，可用來處理彈層點透的問題，具體介紹：[https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events](https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events) ## 四七、touch-action 觸摸操作，當為pan-y時，可用來處理iphone手機的事件異常，具體介紹：[https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action](https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action) **參考鏈接：** http://www.imooc.com/article/1115 http://blog.sina.com.cn/s/blog_99bf42650102xajf.html