Review自己的原型時發現幾個問題，分享之

1、移動端最小觸控區域44*44px，再小就容易點擊不到或者誤點，可參考《iOS Human Interface Guidelines》:?https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/LayoutandAppearance.html

那么怎么保證最小的觸控區域呢，看看百度無線UE史玉潔11年D2分享過的一張圖（手指容易落在目標偏右和偏下的位置）

從而我們可以給文字、圖標、按鈕等可操作元素擴展觸控區域，padding、line-height等都是不錯的方式。

想要成為一個優秀的前端，必須充分了解設計師的意圖，在真的有問題時其實我們可以找設計師喝杯咖啡啥的，一般設計師都是美女哦，當然我們只是為了更好的用戶體驗

不過如果設計師給的區域就不夠大，我們針對很小的icon可以如此擴展

<!--span上是背景圖，通過給span增加padding或者直接在div上設定擴展后的寬高。。。然后將事件綁定在div上--> <div class="icon"><span>圖標</span></div><!--利用::before或::after偽元素設置背景圖，增加偽元素padding或者直接在div上設定擴展后的寬高。。。然后將事件綁定在div上--> <div class="icon">::before</div>

推薦利用偽元素，省了一層嵌套，移動端也不擔心支持的問題，還有一種方法在特定的情況下(父元素寬度限死)使用比較好transform:scale，參照http://m.ctrip.com/webapp/tour/vacations?from=ctrip_home

紅線框出的話筒，現版本已被隱藏掉，需要自己調出來，它就利用了transform:scale，之前的文章我也有講過transform:scale和zoom的區別http://www.cnblogs.com/web-lexi/p/3968050.html

2、上面說到事件綁定到div上，由此我也想到一個問題，

很多小伙伴喜歡把事件綁定在如上圖子元素上，如果熟讀過高程的會知道事件委托，利用事件冒泡來綁定事件的性能遠優于分別綁定于子元素，這個我就不贅述了，畢竟移動端對性能的要求還是很高的，網絡和硬件沒有PC那么好呀

在此給大家推薦一篇移動端前端性能優化文章http://isux.tencent.com/h5-performance.html

?

3、最后給個針對三星蓋世3 fixed的bug小tip

在我們給元素position:fixed 設置width:100%時，變成橫屏時蓋3的寬度還是豎屏的寬度，如何解決

①利用媒體查詢在橫屏時重新賦一下樣式

@media all and (orientation:landscape) { div{width: 100%;} }

②在fixed元素里面再套一層設定position:absolute,width依然100%就可以解決

文章有參考我們原公司的點頭豬（css女神哦）內部分享的郵件，在此總結出來跟大家分享，有問題歡迎指出和討論

轉載于:https://www.cnblogs.com/web-lexi/p/4250880.html

總結

以上是生活随笔為你收集整理的移动端开发注意之一二的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。