移動端適配問題

手機端文字大小用什麼單位

對於只須要適配少部分手機設備，且分辨率對頁面影響不大的，使用px便可

對於須要適配各類移動設備，使用rem，例如只須要適配iPhone和iPad等分辨率差異比較挺大的設備

 iscroll安卓低版本卡頓，如何解決？

方案一：iScroll v5.1.3 設置momentum: true

方案二：配置probeType

方案三：開啓硬價加速：給scroll元素增長css樣式：一webkit一transform:translate3d(0,0,0);

方案四：判斷手機版系統版本，應用原生CSS: overflow:scroll一y

真機測試哪些機型？

從iphone5之後都測，華爲p系列及mate系列， oppo VO機型，小米近兩代（小米6），紅米，三星

如何測試：打開手機開發者模式、usb調試功能，數據線鏈接上電腦，在chrome瀏覽器上輸入chrome://inspect，會自動識別出webkit內核的瀏覽器打開的頁面，便可查看頁面的console

移動端overflow:hidden有可能不生效，左右出現滾動條。

這個問題比較麻煩，緣由是某些元素的寬高超過了100%，必須逐一排查

animation-play-state: paused; 動畫中止屬性，可是這個屬性在IOS上不生效。
替代方案：animation: none;，但這樣會使動畫回到原點而不是當前運動狀態的快照
rotateX, rotateY IOS上有可能發生旋轉過程當中消失。
解決方案： 設置元素被查看位置的視圖 perspective: 3000px;，在StackOverflow上找到的答案
UC舊版本的瀏覽器不支持flex，

替代方案 內容區域高度100%，頭部和底部定位。

安卓機型上動態追加的button的文字縱向沒居中。固定寫死的button縱向居中了，二者的css徹底一致。
緣由：rem計算的像素值有多是小數。致使瀏覽器渲染的時候，產生一像素誤差。
解決方案：使用px設定line-height

經常使用的抓包工具：fildler（http協議），wireshark（任何協議），Charles

IE7-不支持border:none;

透明寫法1.opacity:0~1;IE8以上的瀏覽器 2.filter:alpha(opacity=1~100);     IE9及IE9如下的瀏覽器

常見瀏覽器兼容前綴？

-ms-
-webkit-
-o-
-moz-

 常見的手機應用的後綴:

安卓：.apk 蘋果：.ipa 

wp7 wp8的是xap wp8.1之後用8.1的sdk開發的是appx 跟win8 metro應用通用的

移動端去除滾動條？

::-webkit-scrollbar {
    display: none;  //或width:0;
}

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

 

 移動佈局自適應不一樣屏幕的幾種方式

(1)   響應式佈局

@media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) {
   //針對iPhone 4, 5c,5s, 全部iPhone6的放大模式，個別iPhone6的標準模式<br>　　html{<br>　　　　font-size:10px;<br>　　}
}
@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 2) {
　　//針對大多數iPhone6的標準模式<br>　　html{<br>　　　　font-size:12px;<br>　　}
}
   
@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 3) {
　　//針對全部iPhone6+的放大模式<br>　　html{<br>　　　　font-size:16px;<br>　　}
   
}
@media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio: 3) {
　　//針對全部iPhone6+的標準模式,414px寫爲412px是因爲三星Nexus 6爲412px，可一併處理<br>　　html{<br>　　　　font-size:20px;<br>　　}
}

View Code

(2)   100%佈局（彈性佈局）

(3)   等比縮放佈局（rem)

100vw 等於視口寬度，以iphone5爲例，即100vw = 320px ，100px = 100/320*100vw ->31.25vw = 100px 這也是就是31.25的解決方案來源

3、 請說下移動端常見的適配不一樣屏幕大小的方法？

響應式佈局

簡而言之，就是頁面元素的位置隨着屏幕尺寸的變化而變化，一般會用百分比來定位，而在設計上須要預留一些可被「壓縮」的空間。

Cover佈局

就跟background一size的cover屬性同樣，保持頁面的寬高比，取寬或高之中的較小者佔滿屏幕，超出的內容會被隱藏。此佈局適用於主要內容集中在中部，邊沿無重要內容的設計。

Contain佈局

一樣，也跟background一size的contain屬性那樣，保持頁面的寬高比，取寬或高之中的較大者佔滿屏幕，不足的部分會用背景填充。我的比較推薦用這種方式，但在設計上須要背景爲單色，或者是可平鋪的背景。

 大家作移動端平時在什麼瀏覽器上測試？

Chrome，Safari，微信X5, UC，其餘手機自帶瀏覽器

解決移動端點透問題和300ms延遲？

引入fastclick

FastClick.attach(document.body);

全部的click響應速度直接提高，並且click沒必要替換爲tap了，input獲取焦點的問題也解決了，

 說說移動端是如何調試的？

移動端調試：

(1)   模擬手機調試

(2)   真機調試之android手機+Chrome

(3)   真機調試之 iphone + safari ⑷UC瀏覽器

(1)   微信內置瀏覽器調試

(2)   debuggap

(3)   抓包

詳細參考：https://segmentfault.eom/a/1190000005964730

 ICONFONT使用及其利與弊？

把一些零散的icon作成字體。咱們調用文字的時候，渲染出來的就是icon圖像，這樣的顯示就是iconfont（字體圖標）

好處：iconfont圖像放大後，不會失真。iconfont節省流量 iconfont在顏色變幻方面很簡單

缺點：iconfont不能支持一個圖像裏面混入多重顏色 iconfont的使用沒有使用圖片那麼直接，簡單。

詳細參見：https://segmentfault.com/a/1190000005904616? ea=953657

 說說移動端Web分辨率

從如下幾個方面作答：

(1)   pc到移動，渲染的變遷

(2)   能夠更改的佈局寬度

(3)   再次變遷的像素

(4)   又一次變遷

(5)   是時候說說安卓了

詳細參見：http://www.javashuo.com/article/p-ghwggguw-ez.html

  js獲取dpr 

window.devicePixelRatio

有可能提供的設計稿尺寸：
750 最多見的設計稿尺寸，iphone6，dpr2,750 = 375*2
1242 iPhone6 Plus，dpr3,1242 = 414 *3

絕大多數的安卓機型viewport只支持1，不是1也認爲是1。

IOS的移動設備：
iPhone4, 4s, 5, 5s, 6, 6+, 6s, 6s+ 都是Retina屏，
其中4, 4s, 5, 5s, 6, 6s的ppi都是326，dpr都是2，6+和6s+ppi是441，dpr是3。

1、 rem佈局字體太大怎麼處理？

通常狀況下咱們設置了html根節點的字體大小做爲rem單位的一個基本標準，那麼我 們能夠緊接着在body標籤內設置一個字體大小爲該應用的基本字體大小

針對於一些機型若是一開始就顯示的字體不正常，咱們能夠經過判斷機型而後加載不一樣的樣式

<script language="javascript">

window.onload = function() {

　　alert(「1」);

　　var u = navigator.userAgent;

　　if(u.indexOf('Android') > 一1 ||  u.indexOf('Linux') > -1) { //安卓手機

　　　　alert("安卓手機")；

　　} else if(u.indexOf('iPhone') > 一1) { //蘋果手機

　　　　alert("蘋果手機")；

　　} else if(u.indexOf('Windows Phone') > 一1) { //winphone手機                          alert("winphone 手機")；

　　}

}

</script>

 移動端網頁打開app是經過url schema來打開。 須要向原生開發人員詢問才知道。

好比：< a href="eleme://catering?restaurant_id=406894">打開餓了麼</a>

商城類項目的功能：http://mb.ecmoban.com/kuajingtong/