《Axure新技能：自適應(yīng)手機(jī)屏幕大小》相信不少人都已經(jīng)看過，并對(duì)設(shè)置方法已經(jīng)很熟悉了，但該教程只能適應(yīng)iphone6的屏幕尺寸的比例，在iphoneX出來后屏幕比例改變了，舊的方法已經(jīng)不能適應(yīng)目前的全面屏手機(jī)了，但現(xiàn)在不用擔(dān)心了，筆者已經(jīng)有新的方法可以去適應(yīng)市面上98%移動(dòng)設(shè)備（包括手機(jī)和平板）屏幕的，讓大家在演示原型的時(shí)候更加得心應(yīng)手了。

目錄：

1. 設(shè)置原型寬度
2. 設(shè)置動(dòng)態(tài)面板
3. 發(fā)布項(xiàng)目
4. 查看項(xiàng)目

1、設(shè)置原型寬度

我們把原型的寬度定為：375px（高度不限制，根據(jù)需要設(shè)置）。

2、設(shè)置動(dòng)態(tài)面板

（1）把元件按需求組合并轉(zhuǎn)為動(dòng)態(tài)面板，并設(shè)置為自動(dòng)調(diào)整內(nèi)容尺寸。

（2）需要在頭部固定的設(shè)置固定到瀏覽器，水平靠左、垂直靠上、始終保持頂層。

（3）中間列表滾動(dòng)部分不需要設(shè)置固定到瀏覽器

（4）需要在底部固定的設(shè)置固定到瀏覽器，水平靠左、垂直靠下、始終保持頂層。

3、發(fā)布項(xiàng)目

其它的設(shè)置我就不多說了，主要說一下移動(dòng)設(shè)備的設(shè)置。

• 寬度：375
• 高度：800（設(shè)置800最大可兼容至iphonex)

以上是建議尺寸，也可以使用其它的尺寸。

• 最小縮放倍數(shù)：0.5
• 最大縮放倍數(shù)：3.0? （設(shè)置3.0最大可兼容至ipad pro)
• 允許用戶縮放：no

最重要的初始縮放倍數(shù)千萬不要填寫，填寫以后默認(rèn)就以iphone6（設(shè)置的）的尺寸訪問，需要你縮放一下才能夠正常全屏顯示，如果沒有設(shè)置，則自動(dòng)以你移動(dòng)設(shè)置大小進(jìn)行全屏顯示。

4、查看項(xiàng)目

發(fā)布完以后，放至網(wǎng)上，這個(gè)時(shí)候我們就可以用移動(dòng)設(shè)備進(jìn)行訪問了，我們可以看到無論是iphone5的4.3尺寸還是iphonex的5.8尺寸都是正常全屏顯示的。

請(qǐng)不要使用帶工具欄的頁面訪問，這兩個(gè)頁面都是帶工具欄的index.html,start.html。可以使用這個(gè)網(wǎng)址查看效果：https://zgdyvg.axshare.com/index.html

IOS使用自帶的Safari瀏覽器，Android使用Chrome瀏覽器均可創(chuàng)建快捷方式到桌面，隱藏瀏覽器導(dǎo)航欄。

IOS方法：

Android方法：

點(diǎn)擊桌面生成的圖標(biāo)就可以訪問了，現(xiàn)在看上去是不是很像APP呢。

寫在最后

原型訪問的方法有很多，大家都可以根據(jù)自己的實(shí)際情況進(jìn)行選擇，本文只是提供可以自適應(yīng)手機(jī)屏幕大小的方法，把原型放在手機(jī)上更多的時(shí)候是為了方便外出演示的時(shí)候，給客戶查看一種實(shí)際的效果，所以建議使用高保真原型比較妥。

原型只是展示和溝通的一種方式，并非產(chǎn)品經(jīng)理的全部，請(qǐng)不要本末倒置，產(chǎn)品經(jīng)理應(yīng)該更注重在溝通、思維、邏輯、業(yè)務(wù)上，當(dāng)然有時(shí)間把原型做好做漂亮也是一種技能。

作者：Han ，深圳產(chǎn)品狗一枚，目前在某個(gè)不知名電商任職產(chǎn)品經(jīng)理，歡迎相約交流。

本文由 @Han??原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議