移動端部分相容問題

1、h5頁面視窗自動調整到裝置寬度，並禁止使用者縮放頁面

"
viewport
" content="
width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no
" />

（部分安卓手機的uc瀏覽器寫完以後還是可以放大縮小）

2、三句**合用達到清除html頁面快取效果

"
pragma
" content="
no-cache
">
"cache-control
" content="
no-cache
">
"expires
" content="
0">

3、隱藏狀態列（針對ios）

"
" content="
blank
" />

4、允許全屏瀏覽頁面的標籤（針對ios）

"
" content="
yes" />

5、忽略將頁面中的數字識別為**號碼

"
format-detection
" content="
telephone=no
" />

（ios上會明顯 有時候會把數字當成**號碼）

6、忽略android平台中對郵箱位址的識別

"
format-detection
" content="
email=no
" />

7、新增到主屏後的標題（ios）

10、設定狀態列的背景顏色（ios）

content 引數：

default ：狀態列背景是白色。

black ：狀態列背景是黑色。

black-translucent ：狀態列背景是半透明。如果設定為 default 或 black ,網頁內容從狀態列底部開始。如果設定為 black-translucent ,網頁內容充滿整個螢幕，頂部會被狀態列遮擋。

11、移動端手機號碼識別（ios）

7位數字，形如：1234567

帶括號及加號的數字，形如：(+86)123456789

雙連線線的數字，形如：00-00-00111

11位數字，形如：13800138000

可能還有其他型別的數字也會被識別。我們可以通過如下的meta來關閉**號碼的自動識別：

開啟**功能

開啟簡訊功能：

12、移動端郵箱識別（android）

與**號碼的識別一樣，在安卓上會對符合郵箱格式的字串進行識別，我們可以通過如下的meta來管別郵箱的自動識別：

[email protected]

"
" content="
">

14、viewport模板

"
utf-8
">
"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no
" name="
viewport
">
"yes
" name="
">
"black
" name="
">
"telephone=no
" name="
format-detection
">
"email=no
" name="
format-detection
">

15、webkit表單元素的預設外觀怎麼重置

16、在input框獲得焦點時文字被清空用value 在input框輸入文字時被清空用placeholder

webkit表單輸入框placeholder的文字能換行麼？ios可以，android不行~,在textarea標籤下都可以換行~

html,body

17、手機上的flex布局時會有相容性問題，只用新版本的會出現安卓手機不識別的現象

.box
.box>li

view code

18、輸入框的相容性解決

input[type="
text"],
input[type="
date"],
input[type="
tel"
],　　input[type="
email"],
input[type="
password
"]

view code

19、禁用 radio 和 checkbox 預設樣式

input[type="
radio
"]::-ms-check,input[type="
checkbox
"]::-ms-check

20、webkit表單輸入框placeholder的顏色值

input::-webkit-input-placeholder

input:focus::-webkit-input-placeholder

21、手機上的多行省略

.overflow-hidden

22、文字標籤line-height：1或者是line-height等於height文字會被切掉

手機上浮動元素能寫寬盡量寫寬不然很容易出現相容性問題,盡量不要寫高，因為內容多少不固定

給不同螢幕大小的手機設定特殊樣式

@media only screen and (min-device-width : 320px) and (max-device-width : 375px){}

23、元素一定要寫上type屬性不然會預設提交表單，出現想不到的bug

24、某些安卓手機的自帶瀏覽器不識別onkeydown onkeypress onkeyup事件，這些事件會導致不能輸入漢字

25、input框若是不想輸入文字只能讀不能寫可以加readonly屬性

26、手機上用背景圖寫運動

如果需要背景圖定位來實現運動效果可以用rem進行計算後加上basckground-size:圖的個數*100% 0；

寫背景圖時最好加上top left 或者0 0 不然寫運動效果時容易出現跳

27、彈層的關閉事件

彈層的關閉事件容易觸發彈層關閉後下一層的事件所以要給彈層關閉事件加上event.preventdefault()

彈層彈出後不允許螢幕滾動給彈層加mousemove事件event.preventdefault()

28、麵包屑導航

如果乙個手機看到的和其他手機不一樣會比其他的手機大或者小，檢視他的瀏覽器字型設定是否正常，應該是他把手機瀏覽的字型大小調小或者調大了（坑人的所謂的bug）

ios手機中如果出現乙個元素的層級非常高可還是被別的元素遮蓋的，那麼就將該元素與別的元素同級

29、蘋果手機固定定位有bug 檢查html和body是不是設定了overflow-x:hidden;

移動端部分相容問題總結

1 h5頁面視窗自動調整到裝置寬度，並禁止使用者縮放頁面部分安卓手機的uc瀏覽器寫完以後還是可以放大縮小 2 忽略將頁面中的數字識別為號碼 ios上會明顯有時候會把數字當成號碼 3 忽略android平台中對郵箱位址的識別 4 viewport模板 5 webkit表單元素的預設外觀怎麼重置...

移動端部分相容問題總結

移動端相容問題

1.移動端檔名不要用game等，以防被合作伺服器劫持插入廣告，從而影響專案執行 2.紅公尺手機，ua返回iphone，需要結合platform判斷，但是還不準確，導致需要ios和android區別對待的時候就坑了。3.是fixed的問題。這個解決辦法是盡量不要用，不過ios7及以下才會出現這個問題。...

移動端部分相容問題

移動端部分相容問題總結

移動端部分相容問題總結

移動端相容問題

相關推薦