Christopher,
Sure here is a sample (borrowing some concepts and code from Web AppBuilder):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Mobile Popup</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<style>
html, body, #mapDiv { height: 100%; width: 100%; margin: 0; padding: 0; }
.esriScalebar{
padding: 20px 20px;
}
</style>
<script src="https://js.arcgis.com/3.18compact/"></script>
<script>
var map, _mapInfoWindow, _mapMobileInfoWindow, isMobileInfoWindow;
require([
"esri/map",
"esri/arcgis/utils",
"esri/dijit/PopupMobile",
"esri/dijit/Popup",
"dojo/dom-construct",
"dojo/_base/html",
"dojo/on",
"dojo/dom",
"dojo/domReady!"
], function(
Map,
arcgisUtils,
PopupMobile,
Popup,
domConstruct,
html,
on,
dom
) {
var popup = new Popup(null, domConstruct.create("div"));
arcgisUtils.createMap("1df512c380994cc5a3dad2e2d428eea3", "mapDiv",{
mapOptions: {
center: [-87.62, 41.89],
zoom: 10,
infoWindow: popup
}
}).then(function (response) {
map = response.map;
_mapInfoWindow = map.infoWindow;
if(_mapMobileInfoWindow){
_mapMobileInfoWindow.destroy();
}
_mapMobileInfoWindow = new PopupMobile(null, html.create("div", null, null, map.root));
resetInfoWindow();
});
function inMobileSize() {
var layoutBox = html.getMarginBox("main-body");
if (layoutBox.w <= 600 ||
layoutBox.h <= 600) {
html.addClass("main-body", 'ismobile');
return true;
} else {
html.removeClass("main-body", 'ismobile');
return false;
}
}
function onWindowResize () {
if (map && map.resize) {
map.resize();
resetInfoWindow();
}
}
function resetInfoWindow () {
console.info(map.infoWindow);
if (inMobileSize() && !isMobileInfoWindow) {
map.infoWindow.hide();
map.setInfoWindow(_mapMobileInfoWindow);
isMobileInfoWindow = true;
} else if (!inMobileSize() && isMobileInfoWindow) {
map.infoWindow.hide();
map.setInfoWindow(_mapInfoWindow);
isMobileInfoWindow = false;
}
}
on(window, 'resize', onWindowResize);
});
</script>
</head>
<body id="main-body">
<div id="mapDiv"></div>
</body>
</html>
