GUI -- Added apple touch icon and a few apple-related meta-tags into index.html.

Change-Id: I04448f99ffb0a31869e13d5997d8ddbe53483448
diff --git a/web/gui/src/main/webapp/app/fw/mast/mast.css b/web/gui/src/main/webapp/app/fw/mast/mast.css
index 0eec2ef..a9f3440 100644
--- a/web/gui/src/main/webapp/app/fw/mast/mast.css
+++ b/web/gui/src/main/webapp/app/fw/mast/mast.css
@@ -24,6 +24,10 @@
     vertical-align: baseline;
 }
 
+html[data-platform='iPad'] #mast {
+    padding-top: 16px;
+}
+
 .light #mast {
     background-color: #bbb;
     box-shadow: 0 2px 8px #777;
diff --git a/web/gui/src/main/webapp/data/img/apple-touch-icon.png b/web/gui/src/main/webapp/data/img/apple-touch-icon.png
new file mode 100644
index 0000000..3bf5eb6
--- /dev/null
+++ b/web/gui/src/main/webapp/data/img/apple-touch-icon.png
Binary files differ
diff --git a/web/gui/src/main/webapp/index.html b/web/gui/src/main/webapp/index.html
index 638f3f3..b234057 100644
--- a/web/gui/src/main/webapp/index.html
+++ b/web/gui/src/main/webapp/index.html
@@ -18,6 +18,12 @@
 <head>
     <meta charset="utf-8">
     <link rel="shortcut icon" href="data/img/onos-logo.png">
+
+    <link rel="apple-touch-icon" href="data/img/apple-touch-icon.png">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
     <title>ONOS</title>
 
     <!-- Third party library code included here -->
@@ -139,5 +145,13 @@
          resize
          ng-style="resizeWithOffset(0, 0)"></div>
 </div>
+
+<script>
+    <!-- Inject user agent info into html element to allow CSS sensitivity. -->
+    var b = document.documentElement;
+    b.setAttribute('data-useragent',  navigator.userAgent);
+    b.setAttribute('data-platform', navigator.platform );
+    b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
+</script>
 </body>
 </html>