解决Axure 9没有移动设备配置的问题

相信很多小伙伴升级Axure到9版本后,发现TM这简直就是负升级,一个设计交互的软件,把交互做的越发复杂。

不过吐槽归吐槽,为了满足更好的兼容性(例如从XD复制到Axure),有些小伙伴应该也升级到了9,可是这时发现,原来Axure 8的移动设备配置没有了,以往可以通过设置移动设备视口标签实现页面适配屏幕宽度的功能没有了,越想越气,怎么办?硬着头皮解决呗。

我们先来看下Axure 8的配置界面,多方便。

直接上教程!!!

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)

你可能感兴趣的:(解决Axure 9没有移动设备配置的问题)