整理一下自己平時移動端web開發中遇到的問題，也參考一下前輩的一些總結
1、最常見的要數1像素邊框了
因為Retine屏的分辨率始終是普通屏幕的2倍，1px的邊框在dpr=2的retina屏下會顯示成2px。
但在IOS8中，已經支持0.5px了，那就意味着, 在devicePixelRatio=2的時候，我們可以使用css設置為0.5。
平時用的比較多的也是使用transform了：
div{ height:1px; background:#000; -webkit-transform: scaleY(0.5); -webkit-transform-origin:0 0; overflow: hidden; }
可參考：
2、CSS Sticky Footer布局
大概就是這個意思：如果頁面內容不夠長的時候，頁腳塊粘貼在視窗底部；如果內容足夠長時，頁腳塊會被內容向下推送。
通過設置margin-top、padding-bottom來實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html, body, #wrap {height: 100%;margin: 0;padding: 0} body > #wrap {height: auto; min-height: 100%;background-color: blue;} #main {padding-bottom: 150px;} #footer {position: relative;margin-top: -150px; height: 150px;clear:both;background-color: red;} </style> </head> <body> <div id="wrap"> <div id="main" class="clearfix"> <div id="content"></div> <div id="side"></div> </div> </div> <div id="footer"> </div> </body> </html>
如果主體是使用懸浮布局，還得解決一些瀏覽器的兼容問題（清除浮動）。
參考：
3、flex布局
只能說flex布局真的很好用
4、移動端的meta
移動前端開發中添加一些webkit專屬的HTML5頭部標簽，幫助瀏覽器更好解析html代碼，更好地將移動web前端頁面表現出來。讓普通移動網頁被添加到主屏幕后，擁有一些類native的功能
可以查看天貓、淘寶、網易、京東、百度等等移動端的一些設置
5、移動端跟PC端的區別
適配不同大小的屏幕；
兼容安卓的眾多版本；
有些css屬性在手機上會不生效
手機上click事件有延遲
可以說：移動端需要關注的主要是瀏覽器；視口；事件等等。
關於瀏覽器：
iOS下的瀏覽器就不用多說了，是因為iOS下的瀏覽器相對安卓而言不混亂。而且，蘋果不允許安裝其他渲染引擎。不過基於代理瀏覽器的特性，蘋果上可以安裝代理瀏覽器（但也不是所有代理瀏覽器都可以）。所以在蘋果手機上測試web頁面時，我們一般測試Safari瀏覽器即可，必要時可以測試代理瀏覽器。
對於安卓的話，Web開發者在面對安卓時遇到的問題是，不像其它平台，安卓的內置瀏覽器的情況很復雜，受到多方面因素的影響，正如前面所提到的，就瀏覽器而言，不同的廠商，不同的品牌手機，不同的操作系統，不同的內置瀏覽器，甚至同一種瀏覽器的不同版本都有可能對於移動端的某一些樣式或事件的支持不同。而安卓平台的開放性，讓更多的手機廠商，瀏覽器廠商都可以開發自己的一個瀏覽器來增加設備或操作平台的價值。這也就造就了安卓市場下的各瀏覽器的繁復和差異化。（例如，兩個不同手機廠商的內置瀏覽器在針對同一個web樣式上做了不同優化處理）。不過還好，大多數都是基於webkit，但是測試的時候還是要在主流的瀏覽器都測試一下。
參考：http://www.cnblogs.com/chunyangji/archive/2016/08/16/5776692.html