一.點選穿透：
原因：1. touch事件300ms後，觸發click事件；
2. 混用touch和click會導致點透問題。
解決思路：
1.不要混用touch和click；
2.阻止掉 touch之後的click。
解決方案：
1.tap後延遲350ms再隱藏mask；
2.pointer-events：mask隱藏後，給按鈕下面元素添上pointer-events: none;樣式，讓click穿過去，350ms後去掉這個樣式，恢復響應；
3.fastclick
4.只用click
5.只用touch
解決方案：
1.先顯示假的輸入框，點選後出現真的；
2.用css布局；
三.retina屏1px問題
原因：裝置畫素比(device pixel ratio,簡稱dpr) =物理畫素 / 裝置獨立畫素
；
css中的1px,也就是裝置獨立畫素，並不等於移動裝置的1px(物理畫素)，這些由於不同的手機有不同的裝置畫素比。
解決方案：
1.通過viewport + rem的方式來相容。
目前這種相容方案相對比較完美，適合新專案（老專案改用rem單位成本會比較高）。**m首頁就是這種方案。
在devicepixelratio = 2 時，輸出viewport
在devicepixelratio = 3 時，輸出viewport
同時設定對應viewport的rem基準值，這種方式就可以像以前一樣輕鬆愉快的寫1px了。
移動端常見問題
1 ios下input為type button屬性disabled設定true,會出現樣式文字和背景異常問題 解決方案 使用opacity 1來解決 2 對非可點選元素如 label,span 監聽click事件，部分ios版本下不會觸發 解決方案 css增加cursor pointer就搞定了 3...
移動端常見問題
1 上下拉動滾動條時卡頓 慢 body 2 禁止複製 選中文字 element 解決移動裝置可選中頁面文字 視產品需要而定 3 長時間按住頁面出現閃退 element 4 iphone及ipad下輸入框缺省內陰影 5 ios和android下觸控元素時出現半透明灰色遮罩 6 active相容處理 7...
移動端常見問題
移動端的頁面多數情況下用百分比或者 查詢來設定頁面的寬高度 這樣會達到響應的效果 這裡解釋幾點 1.webkit tap highlight color rgba 0,0,0,0 也可以寫成 webkit tap highlight color transparent 去掉點選時高光顯示 你也可以更...