前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的時候設置一下手機上如何展示原型。

請勾選包含視口標簽。瀏覽器顯示網頁，默認是按照網頁自身分辨率來展示的。勾選了此項之后，里面的區域按照下方規則來處理展示。

寬，使用默認的device-width即可。

高，一般不需要填，因為是根據寬度來決定的。

最小縮放倍數和最大縮放倍數，一般不需要填。

允許用戶縮放，一般填寫no。

初始縮放倍數怎么填

具體規則是原型頁面的橫向分辨率x初始縮放倍數xDPR參數=手機屏幕的橫向分辨率。得出這個值填到上圖中的對應位置。

而這里的DPR參數(devicePixelRatio)，代表的是設備像素和CSS像素的比例，下方的chrome網頁調試中也揭示了這一點。

所以上面的華為p8應該設置為0.96，你可以根據機型去百度搜索對應的DPR參數是多少。

查看原型

在電腦上看

通過chrome-視圖-開發者-開發者工具，切換到你想看的手機尺寸。同時也可以用這個工具去了解在其他機型上面的效果，以方面了解是不是需要單獨適配。

當然safari的菜單欄-開發-響應者模式也可以。

在手機上看

請用手機瀏覽器打開該網頁，請用手機瀏覽器打開該網頁，最好生成到桌面查看效果。比如我設計的原型。

建議豎向減掉20px，因為Axure默認不顯示頂部狀態欄。

總結

建議你們下次設計APP原型的時候按照通用分辨率375×667來設置，次選方法是按照自己手機的邏輯分辨率來定尺寸。。

如果想明白為什么要這樣設置，可以去搜索viewport和邏輯分辨率等概念。當然就使用而言，PM無需了解這些知識。

至于如何把原型放到手機上面查看，我們下次再講。

avaScript 中實現自動檢測用戶是否使用移動設備，并據此跳轉到對應的手機移動網頁，通常可以通過檢查 ?navigator.userAgent?? 屬性來識別用戶代理字符串中包含的設備信息。以下是一個簡單的示例，展示如何基于用戶使用的瀏覽器類型進行判斷并跳轉：

if (/(mobile|android|iphone|ipad|iemobile|windows phone)/i.test(navigator.userAgent)) {
    // 如果是移動設備，則跳轉到移動版網站
    window.location.href = "http://m.example.com"; // 替換為你的移動版網站地址
}

這段代碼會檢測 ??navigator.userAgent?? 中是否存在典型的移動設備標識符，如果存在，則認為用戶正在使用移動設備，并將頁面重定向到指定的移動版網址。

然而，這種方法并不完全可靠，因為用戶代理字符串是可以被偽造的，并且隨著現代瀏覽器的發展，響應式設計已經更為推薦，可以根據屏幕尺寸而不是設備類型來優化網站布局。

另外，也可以使用更現代的方法如 ??navigator.maxTouchPoints?? 或者媒體查詢 (??window.matchMedia??) 來輔助判斷：

// 檢查觸控點數量以大致推測是否為移動設備
if (navigator.maxTouchPoints > 0 && screen.width < 768) {
    window.location.href = "http://m.example.com";
}

// 或者使用媒體查詢結合CSS和JS
if (window.matchMedia("(max-width: 767px)").matches) {
    window.location.href = "http://m.example.com";
}

對于復雜的設備檢測和更好的兼容性，可以考慮使用一些專門的庫，比如過去提到的 ??Device.js??，但請注意這個庫可能需要更新以支持最新的設備類型和瀏覽器特性。現在更多的實踐傾向于采用響應式設計而非硬編碼跳轉，除非有特殊需求。

在JavaScript中，如果你想根據用戶的設備（如手機或桌面設備）自動跳轉到不同的網頁，你可以使用??window.location???對象來改變當前頁面的URL。同時，你可以結合??navigator.userAgent??字符串來判斷用戶設備的類型。

下面是一個簡單的示例代碼，演示如何根據用戶設備類型自動跳轉到不同的網頁：

javascript復制代碼
 window.onload = function() {  
 
   var userAgent = navigator.userAgent || navigator.vendor || window.opera;  
 
   
 
   // 檢查userAgent字符串中是否包含特定的手機標識  
 
   var isMobile = /Mobile|iPhone|iPad|iPod|Android/i.test(userAgent);  
 
   
 
   if (isMobile) {  
 
     // 如果是移動設備，跳轉到移動版網頁  
 
     window.location.href = 'https://mobile.example.com';  
 
   } else {  
 
     // 如果是桌面設備，跳轉到桌面版網頁  
 
     window.location.href = 'https://www.example.com';  
 
   }  
 
 };

這段代碼首先會檢查??userAgent??字符串，看看是否包含任何移動設備的關鍵字。如果找到關鍵字，就認為用戶正在使用移動設備，并自動跳轉到移動版網頁。否則，就認為用戶正在使用桌面設備，并自動跳轉到桌面版網頁。

請注意，這種方法并不是100%準確的，因為用戶代理字符串可以被用戶或某些軟件篡改。但是，對于大多數情況來說，這種方法是足夠有效的。

另外，現代的網站設計通常使用響應式設計（Responsive Design）來適應不同大小的設備和屏幕，而不是簡單地根據設備類型進行重定向。響應式設計可以讓你的網站在各種設備上都有良好的用戶體驗。