手機端文字大小用什么單位
對於只需要適配少部分手機設備，且分辨率對頁面影響不大的，使用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> } }
(2) 100%布局（彈性布局）
(3) 等比縮放布局（rem)
100vw 等於視口寬度，以iphone5為例，即100vw = 320px ，100px = 100/320*100vw ->31.25vw = 100px 這也是就是31.25的解決方案來源
三、 請說下移動端常見的適配不同屏幕大小的方法？
響應式布局
簡而言之，就是頁面元素的位置隨着屏幕尺寸的變化而變化，通常會用百分比來定位，而在設計上需要預留一些可被“壓縮”的空間。
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) 是時候說說安卓了
詳細參見：https://segmentfault.com/a/1190000005884985
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。
一、 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/