本教程将演示如何通过响应式移动专用布局窗口小部件创建移动友好的webapp
1、支持的设备
这个模板支持安卓和IOS横向和纵向姿态，它使用Dojo Mobile框架并包含Dojo标题窗口等小部件。
2、使用移动Web应用程序元素标记
3、使用Compact版ArcGIS API for JavaScript
Compact版ArcGIS API for JavaScript仅包含API的基本部分，不包括面向桌面的窗口小部件和布局。 它是更好的选择来作为移动开发的起点。
要开始使用Compact版本的API，请在HTML页面的<head>元素中添加以下脚本和样式表标签：
4、初始化APP
首先，我们需要将Map、mobile和所需要的类应用到我们的应用程序中。 然后我们使用移动解析器从标记中创建小部件。 直接调用解析器比使用parseOnLoad：true dojoConfig配置更适合使用移动特定的dijits。 它比默认解析器小，并且调整为比默认解析器更快地加载移动dijits。 最后，我们确保地址栏真的被隐藏。 单独上面设置的meta标记不足以在纵向模式下隐藏Android手机和iPhone上的地址栏。 dojox.mobile函数专门处理各种设备差异以及类似window.scrollTo调用不起作用的情况。
5、处理设备方向的变化
map的resize（）和reposition（）方法对于更新地图上的大小和位置很有用。 本教程使用Dojo的头部小部件。 标题表示导航栏，通常出现在视口的顶部。 因此，当设备的方向改变时，我们需要使用一些其他属性来调整地图大小。
我们可以使用has功能来确定设备的操作系统和设备类别。 可以使用window.matchMedia或mobile.getScreenSize来确定设备的当前方向（横向或纵向）。 在这个例子中，我们使用mobile.getScreenSize技术。 从地图大小中减去标题栏和任何浏览器自己的可见组件的高度，以使地图始终精确地填充可用空间，而不管设备或方向如何。
iPhone需要特别的注意和额外的调整。 这些调整分为iphoneAdjustment功能。 此功能可调整延迟地址栏隐藏和纵向模式下永久存在的底部按钮栏。 它还设置了额外的单次使用事件侦听器来处理横向模式下的真实全屏切换。 有关UI组件的精确尺寸，请参阅Apple的文档。
在iOS中，screen.availHeight给出了屏幕的边缘测量的总体边界，而window.innerHeight给出了浏览器的本机UI组件之间的尺寸。 因此，screen.availHeight - window.innerHeight给出了本机浏览器UI的可见高度。
6、创建地图
无论目标平台如何，地图都以相同的方式创建。 为了确保从任何其他“视图”返回时，地图的大小正确，我们也会在转换回地图之后调整地图大小。
本文第一时间发表在微信公众号：GISXXCOM
长按二维码 关注我们