整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
前2篇文章講了《為什么375×667是移動端原型設計的最佳分辨率如何設置手機APP原型尺寸
所謂的APP原型適配手機，是指用手機瀏打開原型頁面的時候，橫豎都剛好撐滿屏幕。當然如果頁面比較長，高度超過一屏是沒問題的。
比如你的原型是375×667，手機是iPhone6/6s/7，那在手機上查看的時候無需縮放，默認撐滿屏幕。
如果你的原型是360×640，而手機是Android的小米4、小米note、華為p7、p8榮耀6、7這些主流機型，也是一樣的。
比如你的原型是375×667,而你的手機是華為p8，1080×1920。理論上來說無法完美適配APP中所有的頁面。但是除了有下導航的頁面一般都沒問題。
你需要在Axure生成HTML的時候設置一下手機上如何展示原型。
請勾選包含視口標簽。瀏覽器顯示網(wǎng)頁，默認是按照網(wǎng)頁自身分辨率來展示的。勾選了此項之后，里面的區(qū)域按照下方規(guī)則來處理展示。
寬，使用默認的device-width即可。
高，一般不需要填，因為是根據(jù)寬度來決定的。
最小縮放倍數(shù)和最大縮放倍數(shù)，一般不需要填。
允許用戶縮放，一般填寫no。
具體規(guī)則是原型頁面的橫向分辨率x初始縮放倍數(shù)xDPR參數(shù)=手機屏幕的橫向分辨率。得出這個值填到上圖中的對應位置。
而這里的DPR參數(shù)(devicePixelRatio)，代表的是設備像素和CSS像素的比例，下方的chrome網(wǎng)頁調(diào)試中也揭示了這一點。
所以上面的華為p8應該設置為0.96，你可以根據(jù)機型去百度搜索對應的DPR參數(shù)是多少。
通過chrome-視圖-開發(fā)者-開發(fā)者工具，切換到你想看的手機尺寸。同時也可以用這個工具去了解在其他機型上面的效果，以方面了解是不是需要單獨適配。
當然safari的菜單欄-開發(fā)-響應者模式也可以。
請用手機瀏覽器打開該網(wǎng)頁，請用手機瀏覽器打開該網(wǎng)頁，最好生成到桌面查看效果。比如我設計的原型。
建議豎向減掉20px，因為Axure默認不顯示頂部狀態(tài)欄。
建議你們下次設計APP原型的時候按照通用分辨率375×667來設置，次選方法是按照自己手機的邏輯分辨率來定尺寸。。
如果想明白為什么要這樣設置，可以去搜索viewport和邏輯分辨率等概念。當然就使用而言，PM無需了解這些知識。
至于如何把原型放到手機上面查看，我們下次再講。
著攜帶設備的越來越普及，移動端項目會越來越多的接觸。所以想給大家介紹一下移動端適配那點事。#前端#
手機物理像素點
每個像素都是由三原色組成的單元。
1080*1920就是橫向1080 縱向1920個物理像素點。
隨著手機發(fā)展 從 720p 1080p 到現(xiàn)在的 2k 4k，邏輯上如果手機分辨率翻倍，豈不是之前的網(wǎng)頁都縮小成一半了，不能迭代一次開發(fā)一次吧。 為了解決這個問題，就引申出 邏輯分辨率 的概念了
設備獨立像素(Density-independent Pixel, DIP) 又稱密度無關像素。這個點代表一個可以由程序使用的虛擬像素。就比如 以前 360p 屏幕（寬360個物理像素 高640個物理像素） 的時候，你的 1px（一個邏輯分辨率） 定位一個 物理像素點。等到了 720p（寬720個物理像素 高1280個物理像素） 的時候 1px 定位 2*2個物理像素點
程序虛擬像素與物理像素的對應關系
PPI超過326的屏幕就是 視網(wǎng)膜屏幕（Retina）#iPhone#
PPI計算方法
設備像素圖
上面設備列表圖中的 Dpr算法：
設備像素比(DPR) ＝ 物理像素(DP) / 設備獨立像素(DIP)
這樣關系就清楚了很多，通俗的說 1個css程序像素占用多少設備像素
這個數(shù)值一般都用在多倍圖中，就是UI切圖，經(jīng)常會有一倍圖，二倍圖（@2x），三倍圖(@3x)。
因為圖片也是由像素點組成的，如果Dpr為3 ，100*100px 的img 元素，就應該放入一張實際寬高 300*300 的圖片，這樣才能清楚的展示。如果放入100*100 的圖片，沒有占滿的像素點，會通過算法去取附近點的顏色，圖就會模糊。放600*600 的圖，多出的像素點會通過算法取平均色，圖就會鈍化。
一般認為 移動設備上有 三個 viewport
移動端瀏覽器的默認布局視口， 可以通過 document.documentElement.clientWidth 來獲取。
移動設備流行之前，pc網(wǎng)頁大行其道，一開始為了讓所有網(wǎng)站正常顯示，移動端瀏覽器就決定默認情況下把viewport 設為一個較寬的值（980px）。這樣pc端的網(wǎng)站也可以在手機上正常顯示。
代表 瀏覽器可視區(qū)域的大小，可以通過 window.visualViewport 來獲取
最理想的 viewport ，寬高等于設備屏幕的物理寬高，剔除了分辨率的干擾，針對同一 ideal viewport 設備開發(fā)的網(wǎng)站，都將完美呈現(xiàn)。
理想視口可以 用過 meta標簽去實現(xiàn)
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">寬度等于設備寬度，初始頁面縮放1倍（就是不縮放），最小最大縮放1倍，禁止用戶縮放
最后這個 viewport-fit=cover 是針對iphone劉海屏的，劉海跟ios底部操作欄會使網(wǎng)頁不能全屏
淘寶移動端meta設置
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">原始不適配 -- viewport控制縮放 -- 媒體查詢 -- 響應式布局 -- 移動端分流 -- Rem
移動端分流原理，主要是通過 UA（User Agent用戶代理）去判斷上網(wǎng)設備, 比如移動端輸入 pc網(wǎng)址 https://www.toutiao.com/，就會跳轉到 https://m.toutiao.com/ （移動端適配地址）。
附上判斷的js代碼
function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}現(xiàn)在項目適配使用的是 vw + rem
rem（font size of the root element）是指相對于根元素（html）的字體大小的單位。
vw是可視窗口的寬度單位，不受設備分辨率影響, width: 1vw 等于 width: 1%。倘若 瀏覽器寬1000px，1vw = 10px
移動設備的原型圖一般都是二倍圖（寬750px）
面試官：你知道移動端適配嗎？
---
**開篇：移動端適配的重要性**
在移動互聯(lián)網(wǎng)飛速發(fā)展的今天，移動端適配已成為每一位前端開發(fā)者必備的核心技能之一。面對市場上琳瑯滿目的手機型號和屏幕尺寸，如何讓同一套代碼在不同設備上呈現(xiàn)出近乎完美的視覺效果和交互體驗，是每一位面試官都會關心的問題。本文將帶你深入探討移動端適配的核心技術和策略，助力你從容應對面試挑戰(zhàn)。
---
**【第一部分】理解移動端適配的挑戰(zhàn)**
**標題：設備碎片化與分辨率多樣化**
隨著智能手機硬件的快速發(fā)展，各品牌、各型號設備的屏幕尺寸、分辨率和像素密度差異巨大。這意味著，如果不對頁面進行適配，可能會出現(xiàn)內(nèi)容錯位、字體大小不一、圖片模糊等問題。
例如，iPhone 6與iPhone 13 Pro Max的物理尺寸和分辨率相差甚遠，前者分辨率為750 x 1334，后者則是1284 x 2778。因此，我們必須有一套有效的適配策略來應對這種情況。
---
**【第二部分】viewport元標簽與設備像素比**
**標題：viewport元標簽與 DPR 的秘密**
適配的第一步是設置`viewport`元標簽，以控制頁面在移動設備上的縮放程度和布局視口的大小：
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
```
這里`device-width`意味著布局視口的寬度等于設備的獨立像素寬度，`initial-scale=1.0`表示初始縮放比例為1，即一個CSS像素對應一個設備獨立像素。
同時，了解設備像素比（DPR）的概念也很關鍵，它是設備物理像素與CSS像素的比例，用于解決高清屏下的圖像模糊問題：
```javascript
// 獲取設備像素比
let dpr = window.devicePixelRatio || 1;
```
---
**【第三部分】CSS單位與適配策略**
**標題：Flexbox、Grid布局與CSS單位REM、VW/VH**
- **Flexbox與Grid布局**：利用現(xiàn)代CSS布局模式，如Flexbox和Grid，可以更好地處理元素的彈性布局，減少因設備尺寸變化導致的布局混亂。
```css
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex-basis: calc(33.33% - 20px);
}
```
- **CSS單位REM與VW/VH**：REM基于根元素字體大小，允許我們基于頁面全局字體大小進行適配；VW/VH基于視口寬度和高度，可以很好地應對屏幕尺寸變化。
```css
html {
font-size: 16px; /* 基準字體大小 */
}
.box {
width: 80vw; /* 盒子寬度為視口寬度的80% */
height: 50vh; /* 盒子高度為視口高度的50% */
}
@media screen and (min-width: 768px) {
html {
font-size: 20px; /* 在大屏設備上增大基準字體大小 */
}
}
```
---
**【第四部分】響應式設計與媒體查詢**
**標題：使用媒體查詢實現(xiàn)多設備適配**
媒體查詢是CSS3的一個強大特性，可以幫助我們根據(jù)不同設備的特性（如視口寬度、設備像素比等）應用不同的CSS樣式：
```css
/* 為小于600px寬度的設備設置樣式 */
@media screen and (max-width: 600px) {
.header {
font-size: 18px;
}
}
/* 為大于等于600px寬度的設備設置樣式 */
@media screen and (min-width: 600px) {
.header {
font-size: 24px;
}
}
```
---
**【第五部分】CSS框架與預處理器的適配功能**
**標題：Bootstrap、TailwindCSS與PostCSS的適配解決方案**
許多CSS框架（如Bootstrap）和預處理器（如PostCSS）都提供了便捷的適配工具和策略。例如，Bootstrap的柵格系統(tǒng)和響應式工具類，TailwindCSS的內(nèi)置響應式前綴，以及PostCSS的插件如postcss-pixel-to-viewport，都可以極大地簡化移動端適配工作。
---
**結語：**
移動端適配是一項涵蓋多個維度的綜合技術，包括但不限于viewport設置、CSS單位選取、布局模式、媒體查詢以及框架和預處理器的應用。只有充分理解并掌握這些技術，才能在面臨面試官“你知道移動端適配嗎？”這個問題時，自信滿滿地給出滿意的答案，并在實際開發(fā)中游刃有余地應對各種設備適配挑戰(zhàn)。持續(xù)關注前沿技術，不斷積累實踐經(jīng)驗，你將在移動端適配領域攀登更高的山峰。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
