Add: Device info

src/Info/Info.scss

@@ -21,6 +21,14 @@
                 margin: 0;
                 user-select: text;
                 word-break: break-all;
+                table {
+                    width: 100%;
+                    border-collapse: collapse;
+                    th, td {
+                        border: 1px solid $gray-light;
+                        padding: 10px;
+                    }
+                }
             }
         }
     }

src/Info/defInfo.es6

@@ -6,5 +6,25 @@ export default [
     {
         name: 'User Agent',
         val: navigator.userAgent
+    },
+    {
+        name: 'Device',
+        val: `<table>
+                  <tbody>
+                      <tr>
+                          <td>screen</td>
+                          <td>${screen.width}px * ${screen.height}px</td>
+                      </tr>
+                      <tr>
+                          <td>viewport</td>
+                          <td>${window.innerWidth}px * ${window.innerHeight}px</td>
+                      </tr>
+                      <tr>
+                          <td>pixel ratio</td>
+                          <td>${window.devicePixelRatio}</td>
+                      </tr>
+                  </tbody>
+              </table>`
+
     }
 ];

src/Info/info.hbs

@@ -2,7 +2,7 @@
     {{#each messages}}
         <li>
             <h2 class="eruda-title">{{name}}</h2>
-            <p class="eruda-content">{{val}}</p>
+            <div class="eruda-content">{{{val}}}</div>
         </li>
     {{/each}}
 </ul>

test/info.js

@@ -12,6 +12,11 @@ describe('default', function ()
     {
         expect($tool.find('.eruda-content').eq(1)).toContainText(navigator.userAgent);
     });
+
+    it('device', function ()
+    {
+        expect($tool.find('.eruda-content').eq(2)).toContainText(window.innerWidth);
+    });
 });
 
 describe('basic', function ()