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">
(二)、IOS私有meta屬性
<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-orientation" content="landscape">
應用模式 <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">
應用模式
<meta name="browsermode" content="application">
二、關於樣式
1、上下拉動滾動條時卡頓、慢
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安卓常見問題