1. 首页
  2. 教程
  3. 高级教程

【Axure9】解决Axure 9无法设置移动设备适配的问题

虽然Axure9做了很多移动端的适配工作,移动端的设计体验也好了很多,但是只是在PC端预览有移动端的效果,在移动设备上浏览却没有自动适应屏幕的效果,而且也没有设置移动端的适配的入口

而在Axure8中是有这个设置面板的,设置非常方便,如下:

【Axure9】解决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)

原创文章,作者:院长大大,如若转载,请注明出处:https://www.axureschool.cn/547.html

发表评论

登录后才能评论

评论列表(3条)

  • cape 2020年12月4日 上午11:40

    您好,经过尝试,会导致原来的自适应效果也丢失了。请问是直接将这段代码粘贴吗?其他还需要修改什么吗?感谢!

    • 院长大大 回复 cape 2021年1月8日 上午10:02

      你好,如果之前本来就有自适应效果,就不用再加新的代码了,我自己试验的是直接复制过去就没问题了

  • 么西么西 2021年5月18日 下午4:51

    你好,代码粘贴进去之后没有生效

联系我们

在线咨询:点击这里给我发消息

邮件:fleede@163.com

工作时间:周一至周五,9:30-18:30,节假日休息