整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
適應視圖的意思是，瀏覽器寬度、高度不同時，就顯示條件匹配的視圖頁面內容，本文給大家講講手機移動端自適應視圖。
Axure 8 自帶自適應功能，可以自適應電腦、平板、手機等不同大小的屏幕。
要完成手機屏幕的適配，需要做兩個地方的設置，一個是頁面自適應，一個是手機自適應。
那我們先聊頁面自適應屬性，頁面自適應屬性可以通過菜單欄“項目-自適應視圖”中配置。自適應視圖的意思是，瀏覽器寬度、高度不同時，就顯示條件匹配的視圖頁面內容，如電腦有些屏幕寬度為1920px、1280px等，手機屏幕寬度為375px。
在不同的屏幕寬度上，瀏覽器默認寬度則不同，或者你在電腦屏幕上瘋狂拖拽瀏覽器窗口大小，瀏覽器則會根據寬度切換到該條件的視圖進行顯示。
當然，如果你只做了一種視圖，那么不管你如何瘋狂拖拽，網頁內容是不會變化的，你會看見的是多出了縱向滾動條或者橫向滾動條，僅此而已。
簡單針對自適應視圖設置中的幾個屬性進行解釋：
預設：系統預設尺寸大小，可以快速填充后面幾項設置數據。
名稱：就是給視圖取個名字。
條件：觸發該自適應視圖的條件，瀏覽器窗口≥某寬度或≤某寬度。
寬：設置觸發自適應視圖寬度，如瀏覽器窗口小于1280px時，顯示該視圖的頁面內容，手機我設置的寬度為500px，因為目前有些大屏手機，其實邏輯像素已經接近500px了，所以保險起見，設置小于500px則顯示手機視圖。
高：一般不設置此項，留空，原理與寬度一個意思。
繼承自：頁面中的默認元素繼承自哪個視圖，繼承的元素可刪除，然后會在原來的視圖依然存在。
特別解釋一下“最大顯示分辨率”，意思是超過最大的顯示分辨率的屏幕，一律按照此視圖內容顯示網頁內容。
自適應視圖設置好后，就可以在不同大小頁面去設計網頁內容了。
生成HTML時，需要在菜單”發布-生成原型文件”的“自適應視圖”中勾選自適應視圖。
聊完頁面自適應，再來聊聊手機自適應。
手機自適應在菜單”發布-生成原型文件”的“手機/移動設備”中進行設置，這里設置的是在手機網頁中如何完美顯示的問題。
如果你不設置，那么可能你手機網頁顯示了網頁內容，然后兩邊寬度留白很多，或者顯示不完網頁內容，因為你在自適應視圖中設計的寬度可能是375px，可能是414px寬度。但是手機的屏幕尺寸種類非常多，設計尺寸并不能完全適應所有手機屏幕。
那么為了不管哪種寬度，在手機網頁上都需要滿屏鋪滿網頁才更美觀，這里的設置就是干這事兒的。
簡單針對手機自適應設置中的幾個屬性進行解釋：
包含視圖接口標記：勾選后，才會啟用手機網頁自適應屏幕大小。
寬度：【重要設置】此處寬度填寫在手機的自適應視圖中，設計圖的基準尺寸，我使用的375px（iPhone 6s）基準進行設計的，所以這里我填寫的是375的寬度。
高度：這里留空，無需填寫。
初始比例：這里留空，無需填寫，我試了試，這里不填寫默認比例為1。
最小比例：【重要設置】這項作用是當用戶使用比設計圖更小的手機瀏覽網頁時，可以等比縮放到手機屏幕寬度，這里設置的是最小值，我設置的0.5，足夠使用了。
最大比例：【重要設置】原理與最小比例相同，使用比設計圖更大的手機屏幕瀏覽網頁時，自動等比放大到手機屏幕寬度，這里我設置的3，目前主流手機的最大屏幕寬度邏輯像素為480，設置3倍已足夠使用。
用戶可調節：填寫no即可。
防止垂直頁面滾動（受阻彈性滾動）：這項我試了幾次，沒明白有什么影響，可選可不選，大家也可以自己試試，如果知道什么意思，可以留言說一下。
自動檢測和鏈接電話號碼（iOS)：在iOS中，可以自動檢測出電話號碼，點擊后，可以撥打電話，可選可不選，根據自己情況來吧。
主屏幕圖標：主要是把網頁設置到主屏幕時，顯示的圖標。
iOS屏幕啟動畫面：網頁放到桌面，打開后的啟動畫面，不多解釋，不懂的，要拖出去打。
隱藏瀏覽器導航（當從iOS主屏幕啟動時）：iOS打開放到桌面的網頁，不會顯示瀏覽器的導航欄和工具欄，比較適合預覽APP應用的效果，勾上就行。
iOS狀態欄樣式：default（白底黑字兒），black（黑底白字兒），black（半透明的黑底白字兒)
沒有具體的操作步驟，不過我想你看懂了這兩處設置的每項參數含義，那么你已經學會了如何去做自適應網頁和手機屏幕自適應了。
福利：給大家一個Axure網站模板，已經配置好頁面自適應與手機自適應，大家可以免費下載研究。
好了，聊完了，再見！
作者：世界是棵樹，微信公眾號：世界是棵樹
本文由 @世界是棵樹 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
作的網頁除了在PC端瀏覽，在現在移動端量巨大的時代下，如何做好PC端與移動端的自適應，是每個程序必須要需要考慮的事情。
下面是沒有加適應的情況：
Axure新技能：自適應手機屏幕大小》相信不少人都已經看過，并對設置方法已經很熟悉了，但該教程只能適應iphone6的屏幕尺寸的比例，在iphoneX出來后屏幕比例改變了，舊的方法已經不能適應目前的全面屏手機了，但現在不用擔心了，筆者已經有新的方法可以去適應市面上98%移動設備（包括手機和平板）屏幕的，讓大家在演示原型的時候更加得心應手了。
目錄：
我們把原型的寬度定為：375px（高度不限制，根據需要設置）。
（1）把元件按需求組合并轉為動態面板，并設置為自動調整內容尺寸。
（2）需要在頭部固定的設置固定到瀏覽器，水平靠左、垂直靠上、始終保持頂層。
（3）中間列表滾動部分不需要設置固定到瀏覽器
（4）需要在底部固定的設置固定到瀏覽器，水平靠左、垂直靠下、始終保持頂層。
其它的設置我就不多說了，主要說一下移動設備的設置。
以上是建議尺寸，也可以使用其它的尺寸。
最重要的初始縮放倍數千萬不要填寫，填寫以后默認就以iphone6（設置的）的尺寸訪問，需要你縮放一下才能夠正常全屏顯示，如果沒有設置，則自動以你移動設置大小進行全屏顯示。
發布完以后，放至網上，這個時候我們就可以用移動設備進行訪問了，我們可以看到無論是iphone5的4.3尺寸還是iphonex的5.8尺寸都是正常全屏顯示的。
請不要使用帶工具欄的頁面訪問，這兩個頁面都是帶工具欄的index.html,start.html?？梢允褂眠@個網址查看效果：https://zgdyvg.axshare.com/index.html
IOS使用自帶的Safari瀏覽器，Android使用Chrome瀏覽器均可創建快捷方式到桌面，隱藏瀏覽器導航欄。
IOS方法：
Android方法：
點擊桌面生成的圖標就可以訪問了，現在看上去是不是很像APP呢。
原型訪問的方法有很多，大家都可以根據自己的實際情況進行選擇，本文只是提供可以自適應手機屏幕大小的方法，把原型放在手機上更多的時候是為了方便外出演示的時候，給客戶查看一種實際的效果，所以建議使用高保真原型比較妥。
原型只是展示和溝通的一種方式，并非產品經理的全部，請不要本末倒置，產品經理應該更注重在溝通、思維、邏輯、業務上，當然有時間把原型做好做漂亮也是一種技能。
作者：Han ，深圳產品狗一枚，目前在某個不知名電商任職產品經理，歡迎相約交流。
本文由 @Han 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協議
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
