Advertisement

Breaking Limits on Mobile HTML5 - 15 Hacks you might not know

mobile + web, speaker, author, developer at ITMaster / Entupalma
May. 16, 2013
Advertisement

More Related Content

More from Maximiliano Firtman(20)

Advertisement

Breaking Limits on Mobile HTML5 - 15 Hacks you might not know

  1. Max Firtman @firt BREAKING LIMITS ON MOBILE HTML5 Amsterdam, May 16th, 2013 Thursday, May 16, 13
  2. mobile+web developer maximiliano @firt Thursday, May 16, 13
  3. Thursday, May 16, 13
  4. Thursday, May 16, 13
  5. hacks, why? Thursday, May 16, 13
  6. Thursday, May 16, 13
  7. Thursday, May 16, 13
  8. Thursday, May 16, 13
  9. Thursday, May 16, 13
  10. Thursday, May 16, 13
  11. 1- UI hacks Thursday, May 16, 13
  12. UI Full screen Thursday, May 16, 13
  13. full screen Thursday, May 16, 13
  14. full screen 4 solutions Thursday, May 16, 13
  15. full screen Solution #1 Thursday, May 16, 13
  16. full screen <meta name="apple-mobile-web-app-capable" content="yes"> Thursday, May 16, 13
  17. full screen <meta name="apple-mobile-web-app-capable" content="yes"> if (navigator.standalone) { } Thursday, May 16, 13
  18. <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width"> Thursday, May 16, 13
  19. Thursday, May 16, 13
  20. Thursday, May 16, 13
  21. full screen <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=320.1"> Thursday, May 16, 13
  22. full screen <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width"> <meta name="viewport" content="..." media="device-height: 568px"> Thursday, May 16, 13
  23. full screen Thursday, May 16, 13
  24. full screen Solution #2 Thursday, May 16, 13
  25. full screen Thursday, May 16, 13
  26. full screen @media (orientation: landscape) and (height: 214px), (orientation: landscape) and (height: 181px) { } Thursday, May 16, 13
  27. full screen Solution #3 future platforms Thursday, May 16, 13
  28. full screen var body = document.documentElement; if (body.requestFullScreen) { body.requestFullScreen(); } Thursday, May 16, 13
  29. full screen var body = document.documentElement; if (body.requestFullScreen) { body.requestFullScreen(); } else if (body.webkitRequestFullScreen) { body.webkitRequestFullScreen(); } Thursday, May 16, 13
  30. full screen var body = document.documentElement; if (body.requestFullScreen) { body.requestFullScreen(); } else if (body.webkitRequestFullScreen) { body.webkitRequestFullScreen(); } else if (body.mozRequestFullScreen) { body.mozRequestFullScreen(); } Thursday, May 16, 13
  31. full screen Solution #4 ... Thursday, May 16, 13
  32. full screen window.addEventListener("load", function() { window.scrollTo(0, 0); }); // use with care document.addEventListener("touchmove", function(e) { e.preventDefault() }); Thursday, May 16, 13
  33. UI Snapped mode Windows 8 Thursday, May 16, 13
  34. snapped mode Thursday, May 16, 13
  35. snapped mode @media only screen and (max-width: 400px) { @-ms-viewport {  width: 320px;  } } Thursday, May 16, 13
  36. UI High resolution canvas Thursday, May 16, 13
  37. hi-res canvas <canvas width="300" height="200"> </canvas> 300px Thursday, May 16, 13
  38. hi-res canvas 300 CSS pixels 300 1.00 390 1.30 450 1.50 600 2.00 672 2.24 900 3.00 device px px ratio Thursday, May 16, 13
  39. hi res canvas <canvas width="300" height="200"> </canvas> 300px Thursday, May 16, 13
  40. hi res canvas var devPxRatio = window.devicePixelRatio; var canvasPxRatio = document.querySelector("canvas") .getContext("2d") .webkitBackingStorePixelRatio; Thursday, May 16, 13
  41. hi res canvas <canvas width="300" height="200"> </canvas> 300px devPxRatio = 2 canvasPxRatio = 1 Thursday, May 16, 13
  42. hi res canvas <canvas width="300" height="200"> </canvas> 300px devPxRatio >= 1 canvasPxRatio = undefined Thursday, May 16, 13
  43. Solution #1 hi res canvas Thursday, May 16, 13
  44. hi res canvas <meta name="viewport" content="width=640"> <canvas width="600" height="400"> </canvas> 600px Thursday, May 16, 13
  45. Solution #2 hi res canvas Thursday, May 16, 13
  46. hi res canvas <script> document.querySelector("canvas") .getContext("2d") .setScale(2, 2); </script> 300px Thursday, May 16, 13
  47. hi res canvas <canvas width="600" height="400"> </canvas> 300px <script> document.querySelector("canvas") .getContext("2d") .setScale(2, 2); </script> Thursday, May 16, 13
  48. hi res canvas <canvas width="600" height="400" style="width: 300px; height: 200px"> </canvas> 300px <script> document.querySelector("canvas") .getContext("2d") .setScale(2, 2); </script> Thursday, May 16, 13
  49. multi-platform & multi-resolution Thursday, May 16, 13
  50. execution & memory Thursday, May 16, 13
  51. UI truly numeric field Thursday, May 16, 13
  52. numeric <input type="number"> Thursday, May 16, 13
  53. numeric <input type="number"> Thursday, May 16, 13
  54. numeric <input type="number"> Thursday, May 16, 13
  55. Solution Thursday, May 16, 13
  56. numeric <input type="number" pattern="[0-9]*"> Thursday, May 16, 13
  57. numeric <input type="password" pattern="[0-9]*"> Thursday, May 16, 13
  58. UI rich editor Thursday, May 16, 13
  59. rich editor <ul contenteditable> <li>First item </ul> Thursday, May 16, 13
  60. rich editor <ul contenteditable> <li>First item </ul> Thursday, May 16, 13
  61. rich editor <ul contenteditable> <li>First item </ul> Thursday, May 16, 13
  62. UI background tab resurrection Thursday, May 16, 13
  63. background Thursday, May 16, 13
  64. background Thursday, May 16, 13
  65. Thursday, May 16, 13
  66. <blink>Welcome to my website!</blink> Thursday, May 16, 13
  67. <bgsound src="welcome.wav"> Thursday, May 16, 13
  68. <font family="Arial" size="20"> Thursday, May 16, 13
  69. background <meta http-equiv="refresh" content="60"> Thursday, May 16, 13
  70. background <meta http-equiv="refresh" content="2"> Thursday, May 16, 13
  71. background <meta http-equiv="refresh" content="2"> <script> var mr = document.querySelector("meta"); setInterval(function() { mr.content=mr.content; }, 1000); </script> Thursday, May 16, 13
  72. Thursday, May 16, 13
  73. background Thursday, May 16, 13
  74. DISCLAIMER Thursday, May 16, 13
  75. only from iOS 6.1 (5.0+ similar) Thursday, May 16, 13
  76. UI images for different screen densities Thursday, May 16, 13
  77. screen densities <img src="photo.png" width="300"> Thursday, May 16, 13
  78. screen densities Thursday, May 16, 13
  79. 300 CSS pixels 300 1.00 390 1.30 450 1.50 600 2.00 672 2.24 900 3.00 device px px ratio screen densities Thursday, May 16, 13
  80. Solution #1 Thursday, May 16, 13
  81. screen densities use vector images <img src="photo.svg" width="300"> <svg></svg> @font-face {} Thursday, May 16, 13
  82. screen densities Thursday, May 16, 13
  83. screen densities Thursday, May 16, 13
  84. Solution #2 Thursday, May 16, 13
  85. screen densities <img src="photo.png" width="300"> if (window.devicePixelRatio > 1.5) { // change URL } Thursday, May 16, 13
  86. Solution #3 Thursday, May 16, 13
  87. screen densities <div id="photoContainer"> #photoContainer { background-image: -webkit-image-set(url('photo-lo.png') 1x, url('photo-hi.png') 2x); width: 300px; height: 200px; } Thursday, May 16, 13
  88. Solution #4 Thursday, May 16, 13
  89. screen densities <div id="photoContainer"> #photoContainer { background-image: url('photo-lo.png'); width: 300px; height: 200px; } Thursday, May 16, 13
  90. screen densities <div id="photoContainer"> @media (-webkit-min-device-pixel-ratio: 1.5) { #photoContainer { background-image: url('photo-hi.png'); background-size: 100%; width: 300px; height: 200px; } } Thursday, May 16, 13
  91. screen densities <div id="photoContainer"> @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5) { } Thursday, May 16, 13
  92. screen densities <div id="photoContainer"> @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1/2) { } Thursday, May 16, 13
  93. screen densities <div id="photoContainer"> @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1/2), (min-resolution: 1.5dppx) { } Thursday, May 16, 13
  94. always query on ranges @media (-webkit-device-pixel-ratio: 2) Thursday, May 16, 13
  95. always query on ranges @media (-webkit-min-device-pixel-ratio: 1.7) Thursday, May 16, 13
  96. find the balance 300x300 900x900 Thursday, May 16, 13
  97. 2- device interaction hacks Thursday, May 16, 13
  98. device media capture Thursday, May 16, 13
  99. media capture <input type="file"> Thursday, May 16, 13
  100. Solution Thursday, May 16, 13
  101. media capture <input type="file" accept="image/*"> <input type="file" accept="video/*"> <input type="file" accept="audio/*"> Thursday, May 16, 13
  102. media capture <input type="file" accept="image/*" capture="camera"> <input type="file" accept="video/*" capture="camcorder"> <input type="file" accept="video/*" capture="microphone"> (old spec) Thursday, May 16, 13
  103. media capture Live demo Thursday, May 16, 13
  104. device interacting with native apps Thursday, May 16, 13
  105. native integration Thursday, May 16, 13
  106. Thursday, May 16, 13
  107. Solution, part I Thursday, May 16, 13
  108. DON'T DO THAT Thursday, May 16, 13
  109. Solution, part II Thursday, May 16, 13
  110. native integration <meta name="apple-itunes-app" content="app-id=999"> Thursday, May 16, 13
  111. native integration Thursday, May 16, 13
  112. native integration <meta name="apple-itunes-app" content="app-id=999"> <meta name="app-argument" content=""> Thursday, May 16, 13
  113. native integration <meta name="msApplication-ID" content="App"> <meta name="msApplication-PackageFamilyName" content="myPackage"> Thursday, May 16, 13
  114. native integration Thursday, May 16, 13
  115. native integration Thursday, May 16, 13
  116. native integration Thursday, May 16, 13
  117. native integration <meta name="msApplication-ID" content="App"> <meta name="msApplication-PackageFamilyName" content="myPackage"> <meta name="msApplication-Arguments" content=""> Thursday, May 16, 13
  118. no api no android Thursday, May 16, 13
  119. Solution, part III Thursday, May 16, 13
  120. native integration <a href="customprotocol://">Open app</a> Thursday, May 16, 13
  121. native integration <a href="twitter://post?message=HTML5"> Tweet this</a> Thursday, May 16, 13
  122. native integration Thursday, May 16, 13
  123. native integration function tweet() { location.href="twitter://post?message=HTML5"; setTimeout(function() { location.href="postCall.html"; }, 1000); } Thursday, May 16, 13
  124. native integration Thursday, May 16, 13
  125. native integration function tweet() { iframe.location.href= "twitter://post?message=HTML5"; setTimeout(function() { appNotInstalled(); }, 1000); } Thursday, May 16, 13
  126. device push notification Thursday, May 16, 13
  127. push <a href="suscription.passbook"> Subscribe to this site </a> Thursday, May 16, 13
  128. push Thursday, May 16, 13
  129. push Thursday, May 16, 13
  130. 3- enhancing your app hacks Thursday, May 16, 13
  131. enhance your app iOS home screen title Thursday, May 16, 13
  132. home screen Thursday, May 16, 13
  133. home screen Thursday, May 16, 13
  134. home screen <title>My long title for SEO</title> <meta name="apple-web-app-title" content="My App"> UNDOCUMENTED Thursday, May 16, 13
  135. enhance your app IE10 Live Tile Thursday, May 16, 13
  136. live tile Thursday, May 16, 13
  137. live tile Thursday, May 16, 13
  138. live tile <meta name="msapplication-TileImage" content="tile.png"> <meta name="msapplication-TileColor" content="#ef0303"> Thursday, May 16, 13
  139. enhance your app You've said live tile!!! Thursday, May 16, 13
  140. live tile <meta name="msapplication-badge" content="frequency=60;polling-uri=XXX"> Thursday, May 16, 13
  141. live tile <meta name="msapplication-badge" content="frequency=60;polling-uri=XXX"> <?xml version="1.0" ?> <badge value="3" /> Thursday, May 16, 13
  142. live tile <meta name="msapplication-badge" content="frequency=60;polling-uri=XXX"> <?xml version="1.0" ?> <badge value="newMessage" /> Thursday, May 16, 13
  143. enhance your app Storage limits Thursday, May 16, 13
  144. storage AppCache, localStorage, WebSQL, IDB Thursday, May 16, 13
  145. storage Different domains, iframes and Cross Document Messaging API Thursday, May 16, 13
  146. storage Thursday, May 16, 13
  147. this might not work in the future Thursday, May 16, 13
  148. do you really need more space? Thursday, May 16, 13
  149. 4- tools Thursday, May 16, 13
  150. Tools Bandwidth simulators Thursday, May 16, 13
  151. netlimiter.com Thursday, May 16, 13
  152. slowyapp.com Thursday, May 16, 13
  153. charlesproxy.com Thursday, May 16, 13
  154. Tools Virtual Mobile Labs Thursday, May 16, 13
  155. developer.nokia.com Thursday, May 16, 13
  156. developer.samsung.com Thursday, May 16, 13
  157. keynotedeviceanywhere.com Thursday, May 16, 13
  158. most used key combinations? Thursday, May 16, 13
  159. Thursday, May 16, 13
  160. Thursday, May 16, 13
  161. Tools Live Reload Thursday, May 16, 13
  162. livereload.com Thursday, May 16, 13
  163. wrapping up Thursday, May 16, 13
  164. we need hacks because • browsers are different • no enough information • undocumented features • buggy Thursday, May 16, 13
  165. however • usability and Performance matters • be careful • your app should work anyway • use feature detection Thursday, May 16, 13
  166. 1 fullscreen 2 snapped mode 3 hires canvas 4 numeric field 5 rich editor 6 background tab 7 images & densities 8 html media capture 9 push notification A home screen title B live tile C storage limits D bandwidth simulators E virtual mobile labs F live reload Thursday, May 16, 13
  167. Thursday, May 16, 13
  168. “change is the only constant“ Heraclitus Thursday, May 16, 13
  169. you can reach a good experience Pictures)from)freedigitalphotos.net) thank you! firtman@gmail.com @firt firt.mobi/pmw Thursday, May 16, 13
Advertisement