orientation.html 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>jQuery Mobile: Event Logger</title>
  7. <link rel="stylesheet" href="../../jquery.mobile-1.0.1.min.css" />
  8. <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
  9. <style>
  10. #orientationText {
  11. font-size: x-large;
  12. font-weight: bold;
  13. margin: 1em;
  14. }
  15. </style>
  16. <script src="../../jquery.js"></script>
  17. <script src="../../jquery.mobile-1.0.1.min.js"></script>
  18. <script>
  19. $( document ).one( "pageinit", function() {
  20. function updateOrientation()
  21. {
  22. $( "#orientationText" ).text( $.event.special.orientationchange.orientation() );
  23. }
  24. updateOrientation();
  25. $( window ).bind( $.support.orientation ? "orientationchange" : "resize", updateOrientation);
  26. });
  27. </script>
  28. </head>
  29. <body>
  30. <div data-role="page">
  31. <div data-role="header"><h1>Orientation Test</h1></div>
  32. <div data-role="content">
  33. <p>The current device orientation is displayed below. It should *ALWAYS* be correct!</p>
  34. <div id="orientationText">Orientation Not Supported!</div>
  35. </div>
  36. </div>
  37. </body>
  38. </html>