IOS安卓常見問題
阿新 • • 發佈：2018-11-02
port android手機 樣式 要求 flow 圓角 webkit art 情況
一、IOS自帶safari瀏覽器
1、safari不支持fixed+input輸入框。
解決方案：
http://www.haorooms.com/post/ios_fixed_input
2、safari圖片加載失敗，默認圖片過大。
解決方案：
http://www.haorooms.com/post/img_faile_jiangrong
3、ios默認safari瀏覽器對齊問題解決
調試方法：
二、安卓UC瀏覽器
1、安卓UC為代表的瀏覽器不支持部分css3屬性，例如calc等 width:90%;width:calc(sdadas);
2、滾動事件不會觸發touchmove事件
三、手機瀏覽器通用問題
1、彈出層touchmove滾動，會觸發body滾動（出現前提是body中有滾動軸）
http://www.haorooms.com/post/webapp_bodyslidebcdiv
2、假如你整個網頁用rem字體，部分安卓瀏覽器出現字體過大的情況。
3、部分安卓瀏覽器對margin要求比較苛刻。
一、關於meta
（一）、常用的公共meta屬性
1、viewport
<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
width=device-width 寬度是設備屏幕的寬度（像素）
height=device-height 高度是設備屏幕的高度（像素）
initial-scale 初始的縮放比例
minimum-scale 允許用戶縮放到的最小比例
maximum-scale 允許用戶縮放到的最大比例
user-scalable 用戶是否可以手動縮放
2、Format-detection
format-detection翻譯成中文的意思是“格式檢測”，顧名思義，它是用來檢測html裏的一些格式的，那關於meta的format-detection屬性主要是有以下幾個設置：
meta name="format-detection" content="telephone=no"
meta name="format-detection" content="email=no"
meta name="format-detection" content="adress=no"
也可以連寫：meta name="format-detection" content="telephone=no,email=no,adress=no"
一般只要禁用手機撥號即可
3、http-equiv
http-equiv顧名思義，相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。 meat標簽的http-equiv屬性語法格式是：＜meta http-equiv="參數" content="參數變量值"＞ ；
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
（四）、其他瀏覽器私有meta屬性【除非特需，一般不推薦使用】 1、QQ瀏覽器私有
全屏模式 <meta name="x5-fullscreen" content="true">
強制豎屏 <meta name="x5-orientation" content="portrait">
應用模式 <meta name="x5-page-mode" content="app"> 2、UC瀏覽器私有
全屏模式 <meta name="full-screen" content="yes">
強制豎屏 <meta name="screen-orientation" content="portrait">
強制橫屏 <meta name="screen-orientation" content="landscape">
body { -webkit-overflow-scrolling: touch; overflow-scrolling: touch; }
2、禁止復制、選中文本
Element { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none; } 解決移動設備可選中頁面文本(視產品需要而定)
3、長時間按住頁面出現閃退
element { -webkit-touch-callout: none; }
4、iphone及ipad下輸入框默認內陰影
Element{ -webkit-appearance: none; }
5、ios和android下觸摸元素時出現半透明灰色遮罩
Element { -webkit-tap-highlight-color:rgba(255,255,255,0) } 設置alpha值為0就可以去除半透明灰色遮罩，備註：transparent的屬性值在android下無效。
後面一篇文章有詳細介紹，地址：http://www.haorooms.com/post/phone_web_ysk
6、active兼容處理
<body ontouchstart="">
7、動畫定義3D啟用硬件加速
Element { -webkit-transform:translate3d(0, 0, 0) transform: translate3d(0, 0, 0); } 註意：3D變形會消耗更多的內存與功耗
8、Retina屏的1px邊框
Element{ border-width: thin; }
9、旋轉屏幕時，字體大小調整的問題
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:100%; }
10、transition閃屏
/設置內嵌的元素在 3D 空間如何呈現：保留3D /
-webkit-transform-style: preserve-3d;
/ 設置進行轉換的元素的背面在面對用戶時是否可見：隱藏 /
-webkit-backface-visibility:hidden;
11、圓角bug
某些Android手機圓角失效
background-clip: padding-box;
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
（四）、其他瀏覽器私有meta屬性【除非特需，一般不推薦使用】 1、QQ瀏覽器私有
全屏模式 <meta name="x5-fullscreen" content="true">
強制豎屏 <meta name="x5-orientation" content="portrait">
應用模式 <meta name="x5-page-mode" content="app"> 2、UC瀏覽器私有
全屏模式 <meta name="full-screen" content="yes">
強制豎屏 <meta name="screen-orientation" content="portrait">
強制橫屏 <meta name="screen-orientation" content="landscape">
body { -webkit-overflow-scrolling: touch; overflow-scrolling: touch; }
2、禁止復制、選中文本
Element { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none; } 解決移動設備可選中頁面文本(視產品需要而定)
3、長時間按住頁面出現閃退
element { -webkit-touch-callout: none; }
4、iphone及ipad下輸入框默認內陰影
Element{ -webkit-appearance: none; }
5、ios和android下觸摸元素時出現半透明灰色遮罩
Element { -webkit-tap-highlight-color:rgba(255,255,255,0) } 設置alpha值為0就可以去除半透明灰色遮罩，備註：transparent的屬性值在android下無效。
後面一篇文章有詳細介紹，地址：http://www.haorooms.com/post/phone_web_ysk
6、active兼容處理
<body ontouchstart="">
7、動畫定義3D啟用硬件加速
Element { -webkit-transform:translate3d(0, 0, 0) transform: translate3d(0, 0, 0); } 註意：3D變形會消耗更多的內存與功耗
8、Retina屏的1px邊框
Element{ border-width: thin; }
9、旋轉屏幕時，字體大小調整的問題
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:100%; }
10、transition閃屏
/設置內嵌的元素在 3D 空間如何呈現：保留3D /
-webkit-transform-style: preserve-3d;
/ 設置進行轉換的元素的背面在面對用戶時是否可見：隱藏 /
-webkit-backface-visibility:hidden;
11、圓角bug
某些Android手機圓角失效
background-clip: padding-box;
IOS安卓常見問題