基础教程：Hype 4文稿面板之移动选项(视区宽度)

在前面的章节中，已经详细讲述了Hype 4交互动效制作软件的文稿面板中的高级选项的选择以及其背后的知识点，学会了CSS样式对对象作用的优先级别。

本章节将讲述Hype 4 HTML5创作工具中文稿面板的移动选项的选择及其在场景设计中的作用。

一、视区宽度

所谓“视区宽度”通常被称为“视口宽度”（Viewport Width），实际上是指可视设备的可视窗口的宽度，例如手机屏幕的宽度、显示器屏幕的宽度等等。在讲述“视区宽度”选项之前，有需要跟小伙伴解析一下为什么需要“视区宽度”。

“视口（Viewport）”概念最早是苹果公司在推出iPhone手机的时候，在引动Safari浏览器中引入Viewport meta标签，其目的是使iPhone的小屏幕尽可能完整地显示整个网页的内容。由此，后来所有的移动开发者都认同了“视口”这个做法。

由于当时还没有“响应式设计”这样的概念，而且绝大多数的网站都是为台式机的大屏幕设计的，将上千像素宽度的网页放入三、四百像素宽度的小屏幕里显示整个网页，视觉效果是非常差的。

（图1设计了这样一个模型：在没有Viewport meta标签时，网页在模拟移动设备上显示，是以1:1在移动设备上显示了该网页；在有Viewport meta标签时，在浏览器模拟移动设备上，以移动设备的显示屏宽度显示了整个页面。）

图1：有Viewport和没有Viewport的差别

Hype是基于移动端进行网页设计的，因此需要对“视口宽度”进行设置，从而使网页的视觉效果符合要求。

图2：移动选项界面

二、设置文档宽度为“视区宽度”

当“视区宽度”选择“文档宽度”时，意味着在移动设备上，场景页面设置的宽度就是设备的屏幕宽度（视口宽度）。无论设备的视口实际宽度是多少，都会满屏显示整个场景页面。

图3：设置为文档宽度

三、设置“设备宽度”为“视区宽度”

当“视区宽度”选择“设备宽度”时，意味着在移动设备上，将以场景页面的实际宽度在视口上显示，不会因视区宽度的变化而变化。

图4:设置为设备宽度

四、设置“设备高度”为“视区宽度”

当“视区宽度”选择“设备高度”时，意味着在移动设备上，视区宽度一定的情况下，场景页面的宽度跟随着视区高度的变化而变化。移动设备的视区高度小，则显示场景页面的宽度就小，反之则大。

图5：设置为设备高度

五、未设定“视区宽度”

当不设置“视区宽度”时，场景页面宽度与视区宽度以固定的比例，在移动设备上显示场景。当视区宽度变大是，场景页面也随之变大，反之则变小。

图6：未设定视区宽度

六、小结

设定视区宽度在大屏幕显示设备上意义不大，但是在移动设备的小屏幕上却非常重要。在Hype通过为视区宽度选择不同的宽度（文档宽度、设备宽度等），实际上就是设置meta标签中的content的width参数。