雖然Axure9做了很多移動端的適配工作,移動端的設計體驗也好了很多,但是隻是在PC端預覽有移動端的效果,在移動設備上瀏覽卻沒有自動適應屏幕的效果,而且也沒有設置移動端的適配的入口
而在Axure8中是有這個設置面板的,設置非常方便,如下:
教程
1、找Axure 9軟件安裝目錄裏的axutils.js文件,路徑一般爲:【C:\Program Files (x86)\Axure\Axure RP 8\DefaultSettings\Prototype_Files\resources\scripts】。
2、用記事本打開這個axutils.js文件,在代碼最前端加上以下代碼。
var oMeta = document.createElement(‘meta’);
oMeta.name = ‘viewport’;
oMeta.content = ‘width=375, minimum-scale=0.5, maximum-scale=3, user-scalable=no’;
document.getElementsByTagName(‘head’)[0].appendChild(oMeta);
3、保存後,重新預覽頁面或生成文件,就已經可以實現頁面適配屏幕寬度了。
延伸
代碼裏面加粗的部分各自代表是:
width:寬度(px或者device-width)
minimum-scale:最小縮放倍數(0-10.0)
maximum-scale:最大縮放倍數(0-10.0)
user-scalable:允許用戶縮放(no或blank)
其他的部分,需要用到的時候往裏加就行
initila-scale:初始縮放倍數(0-10.0)
height:高度(px或者device-height)