js動態設定根字型
文字rem問題
在移動端雖然整體來說大部分瀏覽器核心都是webkit，而且大部分都支援css3的所有語法。但是，由於手機螢幕尺寸不一樣，解析度不一樣，或者你需要考慮橫豎屏的問題，這時候你也就不得不解決在不同手機上，不同情況下的展示效果了。
另外一點，ui一般輸出的視覺稿只有乙份，比如**就會輸出：750px 寬度的（高度是動態的一般不考慮）（詳情），這時候開發人員就不得不針對這乙份設計稿，讓其在不同螢幕寬度下顯示 一致。
一致是什麼意思？就是下面提到的幾個主要解決的問題。
1.畫素自適應問題
2.文字rem問題
3.高畫質圖問題
4.1畫素問題
5.橫豎屏顯示問題
6.手機字型縮放問題
在 1080px 的視覺稿中，左上角有個logo，寬度是 180px（高度問題同理可得）。
那麼logo在不同的手機螢幕上等比例顯示應該多大尺寸呢？
其實按照比例換算，我們大致可以得到如下的結果：
在css畫素是 375px 的手機上，應該顯示多大呢？結果是：375px * 180 / 1080 = 62.5px
在css畫素是 360px 的手機上，應該顯示多大呢？結果是：360px * 180 / 1080 = 60px
在css畫素是 320px 的手機上，應該顯示多大呢？結果是：320px * 180 / 1080 = 53.3333px
使用css的**查詢 @media
@media only screen and
(min-width:
375px)}
@media only screen and
(min-width:
360px)}
@media only screen and
(min-width:
320px)
}
@media only screen and
(min-width:
375px)}
@media only screen and
(min-width:
360px)}
@media only screen and
(min-width:
320px)
}//定義方法：calc
@function
calc
($val)
.logo
公式：
//獲取手機螢幕寬度
var devicewidth = document.documentelement.clientwidth;
//將方案二中的media中的設定，在這裡動態設定
//這裡設定的就是html的font-size
document.documentelement.style.fontsize = devicewidth +
'px'
;
document.documentelement.clientwidth 這個語句能獲取到的準確的手機尺寸的前提是建立在html中設定了如下標籤：
"viewport" content=
"width=device-width"
>
在ios上可以改變鍵盤型別從而輸入非數字(本來期望只能填入數字)
解決辦法：1.如果只是輸入整數的話可以使用
2.如果需要帶有小數的話，只能使用type=number然後在表單提交的時候對input的value值進行正則判斷了。
3.當設定type=number時maxlength,minlength無效(僅限ios…)只能使用正則匹配。
4.input的placeholder偏上，同樣僅限ios
5.只要提示文字和輸入文字一樣大就沒問題了
:
:-webkit-input-placeholder
移動端相容性問題
1 定位問題 ios 2 寫背景圖時最好加上top left 或者0 0 不然寫運動效果時容易出現跳 3 防止手機中網頁放大和縮小 4 設定web應用是否以全屏模式執行 content的預設值是no 5 自動識別 號碼 telephone no可以禁用這功能,預設值是no 6 禁止複製 選中文字 e...
移動端相容性問題
產生原因 pc端的點選事件在移動端也有效果，但是在移動端使用點選事件會有300毫秒的延遲，如果有兩個元素是重疊的，點選之後上面那個元素消失了就會出現點透事件，如果下面元素有點選事件，就會被觸發，因為執行過程 手指按下之後，會先執行touch事件，然後記錄點選的座標，300ms之後，在該座標上查詢元素...
fetch在移動端的相容性問題
前段時間在做移動端h5應用開發過程中，遇到乙個奇怪的問題 同樣的頁面，在ios比較新的版本上可以正常載入，但是在ios 10.2.1上卻一直 loading，載入不出來。借助除錯工具發現，是在傳送 http 請求的過程中報錯了，unhanled promise rejection,具體的錯誤截圖當時...