Now, we are ready to test our new setup with a fully mobile-capable OpenLayers application. As you'll see in the following steps, there's nothing special you need to do with OpenLayers itself to work in a mobile environment:
First, let's create a new web page for this chapter as there are some differences needed to support mobile devices that we haven't seen before. Add the following to a new file in your text editor, and save it as
mobile.html
:<!doctype html> <html> <head> <title>Mobile Example</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="../assets/ol3/ol.css" type="text/css" /> <link rel="stylesheet" href="../assets/css/samples.css" type="text/css" /> </head> <body> <div id="map" class="full-map"></div> <script src="../assets/ol3/ol.js"></script>...