![Page 1: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/1.jpg)
Max Firtman @firt
!
BREAKING LIMITS
ON MOBILE
HTML5
!
!
!Tallinn, Nov 6, 2013
![Page 2: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/2.jpg)
![Page 3: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/3.jpg)
![Page 4: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/4.jpg)
![Page 5: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/5.jpg)
![Page 6: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/6.jpg)
questions
yes, please !
QA at the end
![Page 7: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/7.jpg)
agenda
Hacks for breaking limits - UI - device interaction - enhancing apps - tools
![Page 8: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/8.jpg)
my goal
![Page 9: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/9.jpg)
hacks, why?
![Page 10: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/10.jpg)
![Page 11: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/11.jpg)
1- UI hacks
![Page 12: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/12.jpg)
UI
Full screen
![Page 13: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/13.jpg)
full screen
![Page 14: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/14.jpg)
full screen
3 solutions
![Page 15: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/15.jpg)
full screen
Solution #1
![Page 16: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/16.jpg)
full screen
<meta name="apple-mobile-web-app-capable" content="yes">
![Page 17: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/17.jpg)
full screen
<meta name="mobile-web-app-capable" content="yes">
![Page 18: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/18.jpg)
full screen
<meta name="apple-mobile-web-app-capable" content="yes">
if (navigator.standalone) { }
![Page 19: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/19.jpg)
demo
![Page 20: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/20.jpg)
full screen
Solution #2
future platforms
![Page 21: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/21.jpg)
full screenvar body = document.documentElement; !
if (body.requestFullScreen) { body.requestFullScreen(); }
![Page 22: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/22.jpg)
full screenvar body = document.documentElement; !
if (body.requestFullScreen) { body.requestFullScreen(); } else if (body.webkitRequestFullScreen) { body.webkitRequestFullScreen(); }
![Page 23: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/23.jpg)
full screenvar body = document.documentElement; !
if (body.requestFullScreen) { body.requestFullScreen(); } else if (body.webkitRequestFullScreen) { body.webkitRequestFullScreen(); } else if (body.mozRequestFullScreen) { body.mozRequestFullScreen(); }
![Page 24: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/24.jpg)
full screen
Solution #3
...
![Page 25: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/25.jpg)
full screen
window.addEventListener("load", function() { window.scrollTo(0, 0); }); !
// use with care document.addEventListener("touchmove", function(e) { e.preventDefault() });
![Page 26: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/26.jpg)
UI
Snapped mode Windows 8
![Page 27: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/27.jpg)
snapped mode
![Page 28: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/28.jpg)
snapped mode
![Page 29: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/29.jpg)
snapped mode
Solution
![Page 30: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/30.jpg)
snapped mode
@media only screen and (max-width: 400px) { @-ms-viewport { width: 320px; } }
![Page 31: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/31.jpg)
snapped mode
![Page 32: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/32.jpg)
UI
images for different screen densities
![Page 33: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/33.jpg)
screen densities
<img src="photo.png" width="300">
![Page 34: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/34.jpg)
screen densities
![Page 35: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/35.jpg)
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
![Page 36: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/36.jpg)
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
Firefox OS
Galaxy SIIiPhone 5BB Z10Nexus 5
Nexus 7
![Page 37: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/37.jpg)
Solution #1
![Page 38: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/38.jpg)
screen densitiesuse vector images <img src="photo.svg" width="300">
<svg></svg>
@font-face {}
![Page 39: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/39.jpg)
screen densities
![Page 40: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/40.jpg)
screen densities
![Page 41: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/41.jpg)
Solution #2
![Page 42: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/42.jpg)
screen densities
<img src="photo.png" width="300">
if (window.devicePixelRatio > 1.5) { // change URL }
![Page 43: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/43.jpg)
screen densities
devicePixelRatio = window.screen.availWidth / document.documentElement.clientWidth
![Page 44: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/44.jpg)
Solution #3
![Page 45: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/45.jpg)
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; }
![Page 46: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/46.jpg)
Solution #4
![Page 47: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/47.jpg)
screen densities
<div id="photoContainer">
#photoContainer { background-image: url('photo-lo.png'); width: 300px; height: 200px; }
![Page 48: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/48.jpg)
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; }
}
![Page 49: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/49.jpg)
screen densities
<div id="photoContainer">
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5) { !
!
!
!
!
}
![Page 50: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/50.jpg)
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) { !
!
!
!
}
![Page 51: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/51.jpg)
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) { !
!
!
}
![Page 52: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/52.jpg)
![Page 53: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/53.jpg)
always query on ranges
@media (-webkit-device-pixel-ratio: 2)
![Page 54: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/54.jpg)
always query on ranges
@media (-webkit-min-device-pixel-ratio: 1.7)
![Page 55: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/55.jpg)
find the balance300x300 900x900
![Page 56: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/56.jpg)
UI
High resolution canvas
![Page 57: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/57.jpg)
hi-res canvas
<canvas width="300" height="200"> </canvas>
300px
![Page 58: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/58.jpg)
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
![Page 59: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/59.jpg)
hi res canvas
<canvas width="300" height="200"> </canvas>
300px
![Page 60: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/60.jpg)
hi res canvas
var devPxRatio = window.devicePixelRatio; !
var canvasPxRatio = document.querySelector("canvas") .getContext("2d") .webkitBackingStorePixelRatio;
![Page 61: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/61.jpg)
hi res canvas
<canvas width="300" height="200"> </canvas>
300px
devPxRatio = 2 canvasPxRatio = 1
![Page 62: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/62.jpg)
hi res canvas
<canvas width="300" height="200"> </canvas>
300px
devPxRatio >= 1 canvasPxRatio = undefined
![Page 63: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/63.jpg)
Solution #1
hi res canvas
![Page 64: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/64.jpg)
hi res canvas
<meta name="viewport" content="width=640"> !
<canvas width="600" height="400"> </canvas>
600px
![Page 65: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/65.jpg)
Solution #2
hi res canvas
![Page 66: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/66.jpg)
hi res canvas<script>document.querySelector("canvas") .getContext("2d") .setScale(2, 2); </script>
300px
![Page 67: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/67.jpg)
hi res canvas
<canvas width="600" height="400"> </canvas>
300px
<script>document.querySelector("canvas") .getContext("2d") .setScale(2, 2); </script>
![Page 68: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/68.jpg)
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>
![Page 69: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/69.jpg)
multi-platform & multi-resolution
![Page 70: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/70.jpg)
execution & memory
![Page 71: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/71.jpg)
UI
truly numeric field
![Page 72: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/72.jpg)
numeric
<input type="number">
![Page 73: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/73.jpg)
numeric
<input type="number">
![Page 74: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/74.jpg)
numeric
<input type="number">
![Page 75: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/75.jpg)
Solution
![Page 76: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/76.jpg)
numeric
<input type="number" pattern="[0-9]*">
![Page 77: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/77.jpg)
numeric
<input type="password" pattern="[0-9]*">
![Page 78: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/78.jpg)
UI
where is my date picker?
![Page 79: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/79.jpg)
date
<input type="date">
![Page 80: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/80.jpg)
date
<input type="datetime">
![Page 81: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/81.jpg)
date
<input type="datetime">
![Page 82: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/82.jpg)
Solution
![Page 83: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/83.jpg)
date
<input type="datetime-local">
![Page 84: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/84.jpg)
UI
rich editor
![Page 85: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/85.jpg)
rich editor
<ul contenteditable> <li>First item </ul>
![Page 86: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/86.jpg)
rich editor
<ul contenteditable> <li>First item </ul>
![Page 87: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/87.jpg)
rich editor
<ul contenteditable> <li>First item </ul>
![Page 88: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/88.jpg)
UI
zombie tab
![Page 89: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/89.jpg)
background
![Page 90: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/90.jpg)
background
![Page 91: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/91.jpg)
<marquee>Welcome to my website!</marquee>
![Page 92: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/92.jpg)
<font family="Arial" size="20">
![Page 93: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/93.jpg)
background
<meta http-equiv="refresh" content="60">
![Page 94: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/94.jpg)
background<meta http-equiv="refresh" content="2"> !
![Page 95: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/95.jpg)
background<meta http-equiv="refresh" content="2"> !
<script> var mr = document.querySelector("meta"); setInterval(function() { mr.content=mr.content; }, 1000); </script>
![Page 96: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/96.jpg)
![Page 97: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/97.jpg)
background
![Page 98: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/98.jpg)
DISCLAIMER
![Page 99: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/99.jpg)
on iOS 6 on iOS 7
![Page 100: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/100.jpg)
2- device interaction hacks
![Page 101: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/101.jpg)
device
media capture
![Page 102: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/102.jpg)
media capture
<input type="file">
![Page 103: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/103.jpg)
Solution
![Page 104: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/104.jpg)
media capture
<input type="file" accept="image/*">
<input type="file" accept="video/*">
<input type="file" accept="audio/*">
![Page 105: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/105.jpg)
media capture
<input type="file" accept="image/*" capture>
<input type="file" accept="video/*" capture>
<input type="file" accept="video/*" capture>
(old spec)
![Page 106: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/106.jpg)
media capture
Live demo
![Page 107: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/107.jpg)
device
interacting with native apps
![Page 108: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/108.jpg)
native integration
![Page 109: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/109.jpg)
![Page 110: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/110.jpg)
Solution, part I
![Page 111: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/111.jpg)
DON'T DO THAT
![Page 112: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/112.jpg)
Solution, part II
![Page 113: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/113.jpg)
native integration
<meta name="apple-itunes-app" content="app-id=999">
![Page 114: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/114.jpg)
native integration
![Page 115: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/115.jpg)
native integration
<meta name="apple-itunes-app" content="app-id=999">
<meta name="app-argument" content="">
![Page 116: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/116.jpg)
native integration
<meta name="msApplication-ID" content="App"> <meta name="msApplication-PackageFamilyName" content="myPackage">
![Page 117: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/117.jpg)
native integration
![Page 118: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/118.jpg)
native integration
![Page 119: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/119.jpg)
native integration
![Page 120: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/120.jpg)
native integration
<meta name="msApplication-ID" content="App"> <meta name="msApplication-PackageFamilyName" content="myPackage"> !
<meta name="msApplication-Arguments" content=""> !
![Page 121: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/121.jpg)
no api no android
![Page 122: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/122.jpg)
3- enhancing your app hacks
![Page 123: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/123.jpg)
push notification
enhance your app
![Page 124: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/124.jpg)
push
<a href="suscription.passbook"> Subscribe to this site </a>
![Page 125: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/125.jpg)
push
![Page 126: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/126.jpg)
push
![Page 127: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/127.jpg)
enhance your app
iOS home screen title
![Page 128: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/128.jpg)
home screen
![Page 129: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/129.jpg)
home screen
![Page 130: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/130.jpg)
home screen
<title>My long title for SEO</title> <meta name="apple-web-app-title" content="My App">
UNDOCUMENTED
![Page 131: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/131.jpg)
enhance your app
Changing tint iOS 7
![Page 132: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/132.jpg)
tint
body { background-color: red; }
body { background-color: yellow; }
![Page 133: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/133.jpg)
tint
![Page 134: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/134.jpg)
tintbody { background-color: blue; /* for the tint */ background-image: linear-gradient(to bottom, green 0%, green 100%); /* for the body */ }
![Page 135: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/135.jpg)
enhance your app
IE10 Live Tile
![Page 136: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/136.jpg)
live tile
![Page 137: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/137.jpg)
live tile
![Page 138: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/138.jpg)
live tile
<meta name="msapplication-TileImage" content="tile.png"> !
<meta name="msapplication-TileColor" content="#ef0303">
![Page 139: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/139.jpg)
enhance your app
You've said live tile!!!
![Page 140: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/140.jpg)
live tile
<meta name="msapplication-badge" content="frequency=60;polling-uri=XXX"> !
!
![Page 141: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/141.jpg)
live tile<meta name="msapplication-badge" content="frequency=60;polling-uri=XXX"> !
<?xml version="1.0" ?> <badge value="3" /> !
![Page 142: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/142.jpg)
live tile<meta name="msapplication-badge" content="frequency=60;polling-uri=XXX"> !
<?xml version="1.0" ?> <badge value="newMessage" /> !
![Page 143: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/143.jpg)
enhance your app
It’s even better on IE11
![Page 144: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/144.jpg)
live tile
<meta name="msapplication-notification" content=“frequency=30;polling-uri=“> !
!
![Page 145: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/145.jpg)
live tile
document.addEventListener('mssitepinned', startPeriodicUpdateBatch, false); !
!
![Page 146: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/146.jpg)
live tile
document.addEventListener('mssitepinned', startPeriodicUpdateBatch, false); !
!
![Page 147: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/147.jpg)
buildmypinnedsite.com
![Page 148: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/148.jpg)
enhance your app
Storage limits
![Page 149: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/149.jpg)
storage
AppCache, localStorage, WebSQL, IDB
![Page 150: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/150.jpg)
storage
Different domains, iframes and Cross Document Messaging API !
![Page 151: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/151.jpg)
storage
![Page 152: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/152.jpg)
this might not work in the future
![Page 153: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/153.jpg)
do you really need more space?
![Page 154: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/154.jpg)
4- tools
![Page 155: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/155.jpg)
Tools
Bandwidth simulators
![Page 159: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/159.jpg)
Tools
Remote debuggers
![Page 160: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/160.jpg)
time for demo?
![Page 161: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/161.jpg)
Tools
Virtual Mobile Labs
![Page 165: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/165.jpg)
Tools
Live Reload
![Page 167: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/167.jpg)
wrapping up
![Page 168: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/168.jpg)
we need hacks because
• browsers are different • no enough information • undocumented features • buggy
![Page 169: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/169.jpg)
however
• usability and Performance matters • be careful • your app should work anyway • use feature detection
![Page 170: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/170.jpg)
![Page 171: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/171.jpg)
“change is the only constant“Heraclitus
![Page 172: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/172.jpg)
“in the mobile world, change is the only constant“
![Page 173: Breaking Limits on Mobile HTML5 - TopConf Tallinn](https://reader033.vdocument.in/reader033/viewer/2022052315/55515088b4c905c6268b5554/html5/thumbnails/173.jpg)
you can reach a good experience
Pictures)from)freedigitalphotos.net)
thank you!
[email protected] @firt
firt.mobi/pmw Tomorrow
Google Glass talk#TopConf