時候要真機調試手機端網頁應用，要如何使用電腦端Chrome高度安卓應用或Chrome安卓版內網頁呢？
不同品牌手機打開方式可能不一樣，不過一般方式是
1. 打開開發者選項以后在開發者選項里面打開USB調試
2. 在電腦端打開Chrome瀏覽器，打開Chrome內置的調試頁面chrome://inspect/#devices
3. 把手機通過USB數據線插到電腦上，這時手機會彈出是否允許USB調試，勾選“始終允許使用這臺計算機進行調試”，點擊確定
4. 如果是調試手機端的網頁應用
在 Chrome for Android 中打開要調試的頁面，這時電腦端剛才打開的調試頁面中會顯示已連接的設備和打開的網頁。
5. 這樣就可以像調試電腦本地網頁一樣調試手機端網頁了
機訪問pc網站時使用js自動跳轉到移動網站域名對應的頁面鏈接javascript代碼。這是比較典型的跳轉需求，當用戶使用手機打開pc網站鏈接時，希望能跳轉到移動網站對應的頁面，適用于網站使用兩個域名區分pc，移動端的情況。比如www.域名.com是電腦站,m.域名.com是移動站這樣兩個域名，并且目錄結構url是一樣的，只有域名不一樣。
此代碼當手機訪問pc站時跳轉到移動站的對應頁面，代碼放在pc站上。最好放在<head>下面第一位，最先加載這段js，跳轉更快一點。
<script type="text/javascript">
function browserRedirect() {
var hz=location.pathname;
var sUserAgent=navigator.userAgent.toLowerCase();
var bIsIpad=sUserAgent.match(/ipad/i)=="ipad";
var bIsIphoneOs=sUserAgent.match(/iphone os/i)=="iphone os";
var bIsMidp=sUserAgent.match(/midp/i)=="midp";
var bIsUc7=sUserAgent.match(/rv:1.2.3.4/i)=="rv:1.2.3.4";
var bIsUc=sUserAgent.match(/ucweb/i)=="ucweb";
var bIsAndroid=sUserAgent.match(/android/i)=="android";
var bIsCE=sUserAgent.match(/windows ce/i)=="windows ce";
var bIsWM=sUserAgent.match(/windows mobile/i)=="windows mobile";
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
window.location.href="http://m.reaer.com"+hz+"#www";
} else {
}
}
browserRedirect();
</script>
錄：
1、手機瀏覽器分辨率
2、移動端和pc端網站需要分開嗎
3、dpr和多倍圖
4、常見移動端適配方式
5、大廠手機瀏覽器適配方式
前端開發人員需不需要學習移動端適配： 在全球范圍內，2020 年所有網站訪問的68.1%來自移動設備，比 2019 年的 63.3% 有所增加。臺式機帶來了 28.9% 的訪問量，而 3.1% 的訪問者來自平板電腦。
2021年全球網站訪問來自移動設備勢必會突破70%，所以網頁的移動端適配知識是現在前端開發人員的必修課。下面我們就移動端適配需要了解哪些知識，一起回顧和討論一下。
首先我們得清楚，手機的分辨率和手機瀏覽器分辨率不是一個東西。
一般來說，我們使用的手機的分辨率遠大于手機瀏覽器的分辨率。因為手機分辨率大會讓手機顯示的內容更細膩，比如消除圖片的顆粒感；而手機瀏覽器分辨率小則是為了讓用戶對某些內容更好辨認，比如更大的文字，同時，這樣的設計也可以讓手機瀏覽器展示一些為pc端設計的網頁而不至于由于文字太小無法辨認，或者排版擠成一團看不清楚。
從下邊幾張圖，可以很清楚的看見手機分辨率和手機瀏覽器分辨率的大小和倍數關系： （手機瀏覽器的大小也叫視口大小-viewport）
可以看到現在的旗艦手機的像素比dpr(device pixel ratio)已經達到了3和4，這對我們前端開發人員選擇圖片的大小提出了新的要求，后邊我們會提到多倍圖。
還有就是視口寬度，我們根據查詢現有的大部分手機型號，看到目前的手機視口寬度最小是320px，最大是428px，所以我們一般在媒體查詢時，把視口寬度小于540的設備歸為手機設備。
這里提到的視口大小viewport是比較重要的知識點，移動端網站的開發中尤為重要。我們在這幾個地方都會用到它。
width=device-width這句話的意思是讓當前viewport的寬度等于設備的寬度。如果不這樣設置的話，當前viewport默認是980px，是超出一般手機視口大小的。對這個部分存疑的同學可以看一下ppk的3個viewport的解讀。 initial-scale=1.0這句話是說縮放比等于1，也就是不允許手動縮放。
<meta name="viewport" content="width=device-width,initial-scale=1.0">根據不同的屏幕viewport尺寸來設置不同的css樣式。
@media srceen and (min-width:960px) and (max-width:1199px){ ·······}現在主流的手機瀏覽器都支持這個新的單位，使用起來簡直太方便了。1vw就等于視口寬度的1%，1vh就等于視口高度的1%。
.title {
font-size: 5vw;
}
如果移動端網站和pc端網站需要的結構基本差不多，頁面邏輯沒有那么復雜，那么移動端和pc端可以用一套網站，使用媒體查詢可以針對手機，平板和pc三種尺寸設置三種版式，根據查詢到的設備屏幕尺寸進行不同的樣式展示，以達到三種設備一套代碼的目的。這種響應式的網站可以參考三星和耐克的官網首頁。
而如果網站的移動端和pc端內容差距較大，頁面邏輯復雜，則 需要單獨給移動端編寫頁面，如果你在手機瀏覽器輸入xxxx.com會看到網址自動跳轉到m.xxxx.com，這個就是單獨針對手機端而做的網站。大型網站都是這種pc和移動分離的形式，比如京東、淘寶等。
前邊我們說過，手機的物理分辨率都比瀏覽器分辨率高，兩者的比值叫做dpr（device pixel ratio），這個比值可以通過window.devicePixelRatio查看，當dpr=2 的時候，就意味了手機花了4個物理像素點來展示1個css像素點，所以看起來會更清晰。
文字和邊框由于是矢量的，所以可以被顯示更清晰，而圖片如果還按照css的像素大小來要求，就會顯得很模糊，于是，我們需要用二倍圖、三杯圖甚至是多倍圖用來在dpr大于2的移動端顯示。
比如我們在css上需要展示一張50x50的圖片，如果手機的dpr是2，那么就需要一張100x100的圖片。這樣才可以充分利用手機的物理像素，消除模糊的感覺。
body設置了最小寬度是320，最大寬度是540，body高度不是固定的；
在布局上寬度多數都是用的百分比；
垂直方向的高度，根據元素內容分別使用了px，rem，vw/vh這幾個單位；
文字大小和周圍距離用的是rem單位；圖片基本是二倍圖；導航是用fixed固定。
body設置了固定的100%高度和100%寬度；
在內容的布局上多是使用flex彈性布局來完成的；
圖片接近三倍圖；
基于淘寶的flexible，內容的寬高、文字、間距等，都是使用px為單位，lib-flexible會根據視口大小動態改變mate標簽、data-dpr、font-size等屬性的值，從而控制頁面在不同的移動設備上都有良好的表現；
b站的頁面寬度同樣是百分比；
布局上使用了flex彈性布局；圖片接近三倍圖；
比較的不同的是b站的內容、文字、間距等大量使用了vw/vh單位，這也是目前比較提倡的移動端使用的單位。