第3节          移动设备的浏览设置

Lancy：老师，你骗人！

 

小楼：啊？

 

Lancy：我按你说的做了几套不同尺寸的原型，但是在手机上查看时显示都不能铺满屏幕。

 

小楼：是不是和冬天的小鸡鸡一样？

 

Lancy：老师，你流氓！

 

小楼：我的意思是，是不是像冬天院子里的小鸡一样缩到角落里去了？

 

 Lancy： 老师，你……哼！是的呀！就像你的小鸡都在缩在左上角，好小！

 

小楼： 是我错啦！我忘记告诉你，除了做自适应视图，还需要在发布中进行【移动设备】的设置。

 

在生成HTML的设置窗口中，点击左侧列表中的【移动设备】，然后在右侧的界面中勾选【包含视口标签】。完成这个设置后，原型就能够自动被设备识别，正常显示了。（图5-5）

（图5-5）

设置内容中还包括以下几项：

• 设备宽度设置

设置设备的视口宽度，默认为“device-width”，即设备宽度。此项一般保持默认不变。

• 设备高度设置

设置设备的视口高度，可填写“device-height”，即设备高度。此项可以不填写。

• 初始缩放倍数

指在移动设备上加载原型时，显示的初始尺寸缩放比例。可选数值为0-10，可为小数；比如：宽度为720的原型需要在宽度为360的设备上显示时，可以设置初始缩放比例为0.5，这样在360的设备上则能够显示全部内容。如果原型尺寸与设备尺寸一致，这里填写1或者1.0即可。

• 最小缩放倍数

是指移动设备根据自身尺寸自动缩放原型尺寸的最小值。可选数值为0-10，可为小数。比如：最小缩放倍数设置为1.0时，用宽度360的设备查看宽度为420的原型，是没有办法缩小到1屏查看的，只能滚动页面才能看到全部内容，所以，如果想缩小原型的尺寸看到全部内容，要把最小缩放倍数设置为0.8以下才可以。

• 最大缩放倍数

允许设备中原型缩放的最大倍数可选数值为0-10，可为小数。比如：原型尺寸为360*640，最大缩放倍数设置为1.5时，通过双指放大原型页面，最大尺寸为540*960。

• 允许用户缩放

允许用户进行缩放的话，这里保持空白（blank）即可，不允许用户进行缩放的话，这里填写“no”。

• 禁止页面垂直滚动

勾选此项时，当原型的内容高度超出设备高度时，无法通过垂直方向滚动页面显示超出部分的内容。

 Lancy：老师下面的那些是什么呀？

 

小楼：老师下面？

 

Lancy：少打个逗号啦！

 

小楼：嘿嘿！下面那些是iOS系统的设置。如果使用苹果的移动设备需要下面的这些设置。

 

移动设备设置的下半部分是iOS系统的专属设置，共有以下几项：（图5-6）

（图5-6）

• 自动检测并链接电话号码

勾选此项，可自动识别原型中的电话号码，号码带下划线效果。点击号码则弹出呼叫该号码的提示框。

• 主屏图标设置

设置原型页面链接添加到主屏幕时所显示的图标。图标大小为114px*114px。

• 启动画面设置

设置不同设备的启动画面图片。启动画面是指从页面加载开始到结束的过程中显示的画面。如果加载过程较短则不会显示。

• 隐藏浏览器导航栏

勾选此项后，从主屏幕图标打开时，能够隐藏浏览器的底部导航栏。

• 设置状态栏样式

设置浏览器中浏览原型时状态栏的样式，默认为白色，可根据提示设置为黑色和灰色。

 Lancy：老师，主屏图标指的是什么？

 

小楼：这个是指iOS系统中把网址添加到主屏快捷方式时，所显示的图标。然后通过点击主屏的图标就能够浏览原型。

 

首先，我们开启【包含视口标签】的选项。

然后，我们在iOS专属设置中，设置{主屏图标}。同时，勾选【隐藏浏览器导航栏】。（图5-7）

（图5-7）

    完成上面两个设置后，就可以将原型文件发布到AxShare的服务器工作区中。

接下来，在iOS中（这里使用iPhone6 Plus举例），通过默认浏览器Safari打开发布后的获取的地址。点击浏览器下方导航栏中的功能列表图标。（图5-8）

（图5-8）

    在展开的列表中，点击【添加到主屏幕】的图标。（图5-9）

（图5-9）

    在弹出的界面中，为主屏图标添加一个名称，然后点击右上角的【添加】按钮，完成添加。（图5-10）

（图5-10）

    添加完成之后，在手机的主屏幕中就出现了我们设置的图标，点击该图标就能够打开原型进行访问了。（图5-11）

（图5-11）

~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作，倾力打造Axure RP 8精品课程系列，全新的套路，经典的姿势，更舒爽，更润滑，更紧致，更销魂，想体验这种欲罢不能的学习感觉？快从下面进入！

《AxureRP 8 入门与实战 - 入门篇》------从零入门的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册的同步视频------【点此查看详情】

转载请注明：Axure原创教程网 » Axure RP 8 入门手册 – 第5章（下）