Mobile UI improvments

debug.html

@@ -2,6 +2,7 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
 <title>Virtual x86</title>
+<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
 
 <script src="loader.js"></script>
 <link rel="stylesheet" href="v86.css">

index.html

@@ -2,6 +2,7 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
 <title>Virtual x86</title>
+<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
 
 <script src="v86_all.js"></script>
 <link rel="stylesheet" href="v86.css">
@@ -164,15 +165,16 @@
     <canvas id="vga"></canvas>
 </div>
 
+<input type="text" class="phone_keyboard" style="display: none">
+
+<br style="clear:both"><br>
+
 <textarea cols="80" rows="25" id="serial" style="display: none">This is the serial console. Whatever you type or paste here will be send to COM1.
 
 In Linux it can be accessed with `cat /dev/ttyS0`
 </textarea>
 
-<input type="text" class="phone_keyboard" style="display: none">
-
-<span style="clear:both"></span>
-<br>
+<br style="clear:both">
 
 
 <div id="news">
@@ -186,7 +188,6 @@ In Linux it can be accessed with `cat /dev/ttyS0`
 </div>
 <br style="clear:both">
 
-<br>
 <hr>
 <a href="debug.html">Enable debug</a> 
 &mdash;

src/browser/main.js

@@ -1052,6 +1052,11 @@
             lock_mouse(elem);
         };
 
+        $("screen_container").onclick = function()
+        {
+            document.getElementsByClassName("phone_keyboard")[0].focus();
+        };
+
         $("take_screenshot").onclick = function()
         {
             screen_adapter.make_screenshot();

v86.css

@@ -62,10 +62,10 @@ a {
     color: wheat;
 }
 .phone_keyboard {
-    background-color: #111;
-    border: 1px solid #555;
-    width: 100px;
-    height: 100px;
+    width: 0;
+    height: 0;
+    resize: none;
+    border: 0;
 }
 h4 {
     margin: 0px 0px 20px 0px;