1：小bug處理

安卓手機上點擊a標簽會有陰影出現(xiàn)，處理的方式為在body和element上加上下面這幾句css樣式

body{-webkit-tap-highlight-color:rgba(0,0,0,0);-moz-tap-highlight-color:rgba(0,0,0,0);-ms-tap-highlight-color:rgba(0,0,0,0);-o-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:rgba(0,0,0,0);

移動端禁止頁面縮放

禁止頁面把數(shù)字當成電話號碼

禁止微信瀏覽器調(diào)整頁面字體大小

body{/*禁止微信內(nèi)置瀏覽器調(diào)整字體大小*/

禁止用戶選中頁面文字

body{

在iphone關閉長按圖片保存圖片彈窗

img{

設置輸入框placeholder字體樣式

::-moz-placeholder{color:#A9A9A9;font-family:"PingFangTC-Light";}::-webkit-input-placeholder{color:#A9A9A9;font-family:"PingFangTC-Light";}::-ms-input-placeholder{color:#A9A9A9;font-family:"PingFangTC-Light";}

在ios中 輸入框的光標發(fā)生位移，上移或者下移，解決方法是不要設置line-height

2：在微信瀏覽器中，鏈接到appstore的跳轉(zhuǎn)全都被屏蔽了

解決辦法一是通過跳轉(zhuǎn)到騰訊的微應用（應用寶）中，才能通過它接著跳轉(zhuǎn)到appstore，但是應用寶規(guī)定，必須把app上傳到他們平臺審核通過后才能有這個功能，和蘋果商店類似，但是如果沒有安卓版本的app，只有ios版本的話也不可以。也就是說要在應用寶上傳安卓和蘋果的app才能用應用包的這個功能。

解決辦法二是當用戶點擊下載按鈕之后提示用戶在瀏覽器中打開，只要不是微信瀏覽器，其他瀏覽器都可以跳轉(zhuǎn)到appstore下載app?，F(xiàn)在大部分的公司是這樣做的。

解決辦法三是掃描二維碼進行跳轉(zhuǎn)，這在微信瀏覽器中是可以的，把鏈接生成二維碼的網(wǎng)站一大堆，隨便百度一個就可以了，當用戶點擊下載按鈕之后，彈出二維碼供用戶掃描。但是問題來了，如果圖片不大的話，長按圖片是出不來掃描圖中二維碼那個按鈕的。解決辦法就是再設置一個全屏的二維碼，讓它的透明度為0，當用戶長按時，其實是點的大的二維碼，這樣隨便按哪都會彈出來掃描圖中的二維碼那個按鈕。。。（本人也是這樣做的）

3：

在ios移動端瀏覽器中，如果給視頻video不設置controller的話，視頻播放控件依舊會顯示出來，很丑，解決辦法就是用一個蒙版蓋住視頻，自己寫播放按鈕在上面，讓視頻的透明度為0，給包裹video標簽的div設置背景圖片，當點擊播放時，才讓視屏的透明度為1，這樣就好看多了。?！，F(xiàn)在一些大的科技公司就是有自己的播放器插件，也就是模擬視頻播放器，這樣就可以隨心所欲的改變視頻播放器的樣式了。

4：（不同的手機屏幕適配問題）

我相信身為一名前端開發(fā)攻城獅剛開始最頭疼的應該是手機適配問題了，怎樣才能讓自己寫的頁面在各種手機上都能達到一致效果沒有固定的解決方法，各位童鞋可以根據(jù)自己的需要來進行適配，下面分別為幾種適配方法：

（1）使用媒體查詢的方式，在頁面的css中加入以下代碼：

@mediaonlyscreenand(min-width:1024px){

（2）使用百分比布局：

不同的手機有著不同的分辨率，這時再用我們pc端布局常用的px就不合適了。使用百分比布局要時時刻刻清楚其父元素，因為子元素的百分比高度是根據(jù)父元素的高度來確定的，當父元素的高度為不確定值時，或者說父元素的高度未定義時，子元素的高度百分比將沒有用（沒有參照物）。所以只有設置了父元素的高度，子元素的高度百分比才會有用。

通常使用百分比布局的人不多，因為計算太麻煩了。

（3）單位使用em與rem

em是根據(jù)相對單位，不是固定的，他會繼承父級元素的字體大小，若沒有父級則em的相對基準點為瀏覽器的字體大小，瀏覽器的字體默認為16px，因此若無父級元素，相對于瀏覽器大?。篨em=X*16px; rem是css3新增屬性，是完全相對于HTML根元素大小設定的，默認為10px，因此無論父級字體大小，1rem=10px。所以可以根據(jù)屏幕的大小來動態(tài)的改變html的字體大小，然后使用rem為單位就可以進行適配了，改變?yōu)g覽器字體的代碼為：

functionresetHtmlFont(){//改變?yōu)g覽器字體大小

但是這個如果在電腦端打開的話，屏幕多大就會多大，如果需求是在PC端打開也和移動端一樣的話，用這種方法還得加一個判斷，就是：

if (deviceWidth >=750) {//如果屏幕寬度大于750px的話，讓deviceWidth為750 deviceWidth = 750;}

把這段加到resetHtmlFont這個函數(shù)里就可以了。

（4）柵格布局&&彈性布局

box-sizing:border-box;可以改變盒子模型的計算方式方便你設置寬進行自適應流式布局。

彈性布局為CSS3新出現(xiàn)的屬性，簡單的用法看下面一個例子：

上面的html結構為一個彈性布局的ul標簽內(nèi)包含了4張400*400的圖片，css代碼為：

.flex-container{list-style:none;display:flex;flex-direction:row;flex-wrap:wrap;

關于css3的彈性布局這里不必多說，具體的可以產(chǎn)靠這篇博文，寫的不錯。

深入理解css3彈性盒布局

（5）動態(tài)的改變頁面的zoom值（和第三個類似）

開發(fā)者也可以根據(jù)屏幕的大小來動態(tài)的改變頁面的zoom值來進行適配，具體的思路和第三個方法類似，就是動態(tài)的控制頁面的縮放，具體的代碼為：

functionresetHtmlFont(){//改變?yōu)g覽器字體大小

(6)動態(tài)的改變頁面的viewport來進行適配

個人覺得動態(tài)的改變頁面的viewport值來進行適配是比較好的解決方案，包括本人以及很多大公司都在使用這種方法，這種方法的具體思路是通過js動態(tài)的改變頁面的viewport來控制頁面的顯示區(qū)域進行適配，我們公司有個大神寫了一個基于jquery的動態(tài)改變viewport的插件，通熟易懂，引入完jq再引入這個文件就可以適配了，無需進行別的操作，其它的布局什么的直接按照PC端的來寫就可以了，下面來貼出代碼：

+function(){

（7）使用css3的transiform的scale來改變頁面的縮放值

對于一般的web展示頁面，dom結構不算復雜的話可以使用css3的scale來動態(tài)的收縮頁面，比我上面提到的動態(tài)的改變zoom值要流暢很多，騰訊里面的好多簡單頁面就是采用的這種方法，具體的思路和代碼為：

varautoScale=function(){varratio=320/504,//原設計稿的寬高比（504是iPhone5的高度去掉標題欄高度）

具體的可以參考：騰訊ISUX