版权声明：微信公众号：GIS派本攵为博主原创文章，未经博主允许不得转载 /agisboy/article/details/
本教程将演示如何通过响应式移动专用布局窗口小部件创建移动友好的webapp
这个模板支持安卓和IOS橫向和纵向姿态，它使用Dojo Mobile框架并包含Dojo标题窗口等小部件
2、使用移动Web应用程序元素标记
Compact版arcgisforjsapi API for JavaScript仅包含API的基本部分，不包括面向桌面的窗口小部件和布局 它是更好的选择来作为移动开发的起点。
要开始使用Compact版本的API请在HTML页面的<head>元素中添加以下脚本和样式表标签：
首先，我们需要將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的文檔
无论目标平台如何，地图都以相同的方式创建 为了确保从任何其他“视图”返回时，地图的大小正确我们也会在转换回地图之后調整地图大小。
本文第一时间发表在微信公众号：GISXXCOM
想了解更多GIS技术
