web移動端之ios兼容問題

　　網站打包放在ios的app上會自動一瞬間給網站某些標籤加上其餘標籤和屬性。致使該標籤內容異常

 

1：ios中點擊出現灰色陰影效果，（明明什麼效果都沒有加）
解決辦法：

-webkit-tap-highlight-color: transparent;
 
2：xxxx-xx-xx 日期格式在ios中報錯
解決辦法：改爲xxxx/xx/xx格式。例如：

new Date(this.fullyear + '/' + this.month + '/1').getDay()
 
3：ios將日期識別爲電話號碼致使的變色問題

緣由：這幾個日期被ios自動加了a標籤這段代碼

<a dir="ltr" href="tel:2930311" x-apple-data-detectors="true" x-apple-data-detectors-type="telephone" x-apple-data-detectors-result="0">29</a>
 
解決辦法：
在樣式表中加入

*[x-apple-data-detectors] {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
} 
參考連接：
點擊查看ios將電話號碼設置爲藍色的解決辦法

4：去掉ios中input框有默認陰影框
解決辦法：

input {
outline-color: invert;
outline-style: none;
outline-width: 0px;
border: none;
border-style: none;
text-shadow: none;
-webkit-appearance: none;
-webkit-user-select: text;
outline-color: transparent;
box-shadow: none;
}
 
5：ios中字體會顯示加粗效果，可是在android上顯示ok
解決辦法：進行抗鋸齒渲染。
這個屬性能夠使頁面上的字體抗鋸齒,使用後字體看起來會更清晰。

-webkit-font-smoothing: antialiased; /*chrome、safari*/
-moz-osx-font-smoothing: grayscale;/*firefox*/
 
解釋：

(1)Webkit在本身的引擎中支持了這一效果。-webkit-font-smoothing它有三個屬性值:none ------ 對低像素的文本比較好subpixel-antialiased------默認值antialiased ------抗鋸齒很好 例子:body{-webkit-font-smoothing: antialiased;}  (2)Gecko也推出了本身的抗鋸齒效果的非標定義。-moz-osx-font-smoothing: inherit | grayscale;這個屬性也是更清晰的做用。例子:.icon {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}