常常在一些原型設計QQ討論群里，有人咨詢如何讓移動端原型剛好能顯示在手機屏幕上，更進一步的效果是在不同分辨率上都能正常顯示，今天我們就來聊聊如何適配不同手機分辨率的問題。

一、移動端簡單原型設計

先來設計一個簡單的移動端的原型，上邊一個標題欄，中間同內容，底端是一個菜單欄。

樣式設置如下：

（1）標題欄：添加一個矩形框，命名title，大小為400*40，藍底白字，文字左對齊，左邊距10。

（2）搜索框：添加一個矩形框模擬輸入框，大小為360*40，灰色邊框，灰色文字，文字左對齊，文字內容為“請輸入搜索內容”。

（3）幾個圖標：在輸入框下方添加5個占位符來表示，注意將左右兩個占位符分別和上方的矩形框對齊。

（4）菜單欄：在稍微下方的位置添加個矩形框，命名為menu，表示菜單欄，大小和標題欄一致，背景為淺灰色。

準備工作做好了，我們希望的效果是在手機上顯示時，標題欄寬度正好和手機瀏覽器寬度一樣，輸入框和幾個占位符在水平方向上處于屏幕中間位置，菜單欄在屏幕的底端。

二、移動端原型預覽

好了，現在我們不做任何處理的情況下，預覽一下效果。

為了在預覽時不要出現左側的工具欄影響查看，我們在按下F8鍵將原型導出html時注意選擇“不加載工具欄”：

然后將導出的原型通過手機數據線傳到手機上SD卡的某個位置（為方便，我們以Android手機為例），在手機上訪問頁面index.html，訪問的效果如下：

我們發現除了手機屏幕比較小外，顯示的效果和在電腦瀏覽器上的效果一樣，并沒有適配在手機上，也就是說，原型根本就沒有識別到當前是在手機瀏覽器上顯示。

三、修改發布參數

我們需要修改一下發布時的參數，讓導出的頁面能自動識別出是在手機上訪問。

按下F8鍵，選擇“移動設備”，只需要勾選“包含視口標簽”，單擊“生成”按鈕：

重新導出原型頁面，將導出的頁面重新上傳到手機SD卡上，再通過手機瀏覽器來訪問，效果如下：

這時我們發現效果圖已經基本差不多在手機上正常顯示了。

但是，還是有點問題！

1. 標題欄和菜單欄寬度并沒有和屏幕寬度一致，右邊有空出一部分
2. 內容部分也沒有在屏幕上水平居中顯示
3. 菜單欄沒有在屏幕的底端

怎么辦呢？

辦法是有的，這就是我們下一步要解決的問題。

四、手機屏幕分辨率適配思路

現在的問題有上面提到的三點，那么就針對這三點來處理。

（1）標題欄和菜單欄寬度并沒有和屏幕寬度一致的問題

思路：我們并不知道每個手機的屏幕大小是多少，但是Axure里有函數可以獲得瀏覽器窗口的寬度，因此只要在原型頁面加載完成時，設置一下標題欄和菜單欄的寬度和窗口寬度大小一樣不就行了嗎？

選擇當前頁面，雙擊“頁面載入時”添加事件處理：

這樣在頁面加載完成時，就會設置標題欄和菜單欄和屏幕寬度一致了，注意同時勾選title和menu，寬度都設置為“[[Window.width]]”。

（2）內容部分也沒有在屏幕上水平居中顯示

思路：我們將內容部分當作一個整體，在頁面加載完成后，將內容移動到屏幕水平中面位置。

選擇除標題欄和菜單欄外的內容部分，右鍵轉換為動態面板，命名為main：

編輯前面的頁面加載事件，移動動態面板main的絕對位置到屏幕水平中央位置，y位置不變，計算公式=（窗口寬度-動態面板寬度）/2，最終的表達式為“[[(Window.width-LVAR1.width)/2]]”，注意這里使用到局部變量表示動態面板：

（3）菜單欄沒有在屏幕的底端

我們能取到窗口的高度，因此我們計算出菜單欄在屏幕上的位置。
具體位置=屏幕的高度-菜單欄的高度，最終表達式為“[[Window.height-LVAR1.height]]”，將菜單欄移動到這個位置即可，注意這里同樣使用到了局部變量表示菜單欄：

五、最終預覽效果

將原型重新導出，上傳到手機上，使用手機瀏覽器查看，最終的效果如下：

可以看到原型已經適配了手機屏幕的大小，達到我們所需要的效果，即使你在換了不同的手機后，也同樣會正常顯示。

本文由 @Axure 原型設計工場?原創發布于人人都是產品經理。未經許可，禁止轉載。