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