Axure 9無法設置移動設備適配的解決方法

雖然Axure9做了很多移動端的適配工作,移動端的設計體驗也好了很多,但是隻是在PC端預覽有移動端的效果,在移動設備上瀏覽卻沒有自動適應屏幕的效果,而且也沒有設置移動端的適配的入口

而在Axure8中是有這個設置面板的,設置非常方便,如下:

Axure 9無法設置移動設備適配的解決方法

 
 
 
那如何才能設置移動端適配呢,還是有辦法的,只是需要稍微做一些處理

教程

1、找Axure 9軟件安裝目錄裏的axutils.js文件,路徑一般爲:【C:\Program Files (x86)\Axure\Axure RP 8\DefaultSettings\Prototype_Files\resources\scripts】。

2、用記事本打開這個axutils.js文件,在代碼最前端加上以下代碼。

// 向頁面注入meta標籤

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)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章