Pages

Monday, August 05, 2013

Mobile / desktop cross layout - JavaScript, CSS, HTML 

<!DOCTYPE html>
<html>
  <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta http-equiv="pragma" content="no-cache" />
 <meta http-equiv="Cache-Control" content="no-cache, no-store" />
 <meta http-equiv="expires" content="Mon, 01 Jan 1981 00:00:01 GMT" />
    
    <style>
      html, body {
        height: 100%;
      }
      body {
        background-color: #555;
        color: #fff;
      }
      #logger {
        border: #fff 1px solid;
        color: #fff;
      }
    </style>
    <script type="text/javascript">
      function init() {
        if (/Mobile/.test(navigator.userAgent)) {
          var metaElement = document.createElement('meta');

          metaElement.setAttribute('name', 'viewport');
          metaElement.setAttribute('content',
            'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes');

          document.getElementsByTagName('head')[0].appendChild(metaElement);
        }
      }

      init();

      function onload() {
        document.getElementById('logger').innerHTML = navigator.userAgent;

        if (!/Mobile/.test(navigator.userAgent)) {
          document.getElementById('logger').style.width = "200px";
        }
      }
    </script>
  </head>
  <body onload="onload()">
    <table width="100%" height="100%">
      <tr>
        <td valign="middle" align="center">
          <div id="logger"></div>
        </td>
      </tr>
    </table>
    </div>
  </body>
</html>
Postado por Allann Jones às 4:14 PM

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)