• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Breaking Limits on Mobile HTML5 - 15 Hacks you might not know
 

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

on

  • 11,692 views

Slides from the talk "Breaking Limits on Mobile HTML5' during Mobilism 2013, May 16th 2013

Slides from the talk "Breaking Limits on Mobile HTML5' during Mobilism 2013, May 16th 2013

Statistics

Views

Total Views
11,692
Views on SlideShare
10,681
Embed Views
1,011

Actions

Likes
35
Downloads
150
Comments
5

10 Embeds 1,011

https://twitter.com 442
http://shawwebsitedesign.jimdo.com 229
http://www37.jimdo.com 171
http://ri.dev.skyron.co.uk 116
http://oyungelistirenler.com 23
http://lanyrd.com 11
http://testdomain.dev 8
http://delivr.dev 5
http://tweetedtimes.com 3
http://resultsig.com 3
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 5 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Max Firtman @firtBREAKING LIMITSON MOBILEHTML5Amsterdam, May 16th, 2013Thursday, May 16, 13
    • mobile+web developermaximiliano@firtThursday, May 16, 13
    • Thursday, May 16, 13
    • Thursday, May 16, 13
    • hacks, why?Thursday, May 16, 13
    • Thursday, May 16, 13
    • Thursday, May 16, 13
    • Thursday, May 16, 13
    • Thursday, May 16, 13
    • Thursday, May 16, 13
    • 1- UI hacksThursday, May 16, 13
    • UIFull screenThursday, May 16, 13
    • full screenThursday, May 16, 13
    • full screen4 solutionsThursday, May 16, 13
    • full screenSolution #1Thursday, May 16, 13
    • full screen<meta name="apple-mobile-web-app-capable"content="yes">Thursday, May 16, 13
    • full screen<meta name="apple-mobile-web-app-capable"content="yes">if (navigator.standalone) { }Thursday, May 16, 13
    • <meta name="apple-mobile-web-app-capable"content="yes"><meta name="viewport"content="width=device-width">Thursday, May 16, 13
    • Thursday, May 16, 13
    • Thursday, May 16, 13
    • full screen<meta name="apple-mobile-web-app-capable"content="yes"><meta name="viewport"content="width=320.1">Thursday, May 16, 13
    • 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
    • full screenThursday, May 16, 13
    • full screenSolution #2Thursday, May 16, 13
    • full screenThursday, May 16, 13
    • full screen@media (orientation: landscape) and (height: 214px),(orientation: landscape) and (height: 181px){}Thursday, May 16, 13
    • full screenSolution #3future platformsThursday, May 16, 13
    • full screenvar body = document.documentElement;if (body.requestFullScreen) {body.requestFullScreen();}Thursday, May 16, 13
    • full screenvar body = document.documentElement;if (body.requestFullScreen) {body.requestFullScreen();} else if (body.webkitRequestFullScreen) {body.webkitRequestFullScreen();}Thursday, May 16, 13
    • full screenvar body = document.documentElement;if (body.requestFullScreen) {body.requestFullScreen();} else if (body.webkitRequestFullScreen) {body.webkitRequestFullScreen();} else if (body.mozRequestFullScreen) {body.mozRequestFullScreen();}Thursday, May 16, 13
    • full screenSolution #4...Thursday, May 16, 13
    • full screenwindow.addEventListener("load",function() { window.scrollTo(0, 0); });// use with caredocument.addEventListener("touchmove",function(e) { e.preventDefault() });Thursday, May 16, 13
    • UISnapped modeWindows 8Thursday, May 16, 13
    • snapped modeThursday, May 16, 13
    • snapped mode@media only screen and (max-width: 400px) {@-ms-viewport { width: 320px; }}Thursday, May 16, 13
    • UIHigh resolutioncanvasThursday, May 16, 13
    • hi-res canvas<canvas width="300" height="200"></canvas>300pxThursday, May 16, 13
    • hi-res canvas300 CSS pixels300 1.00390 1.30450 1.50600 2.00672 2.24900 3.00device px px ratioThursday, May 16, 13
    • hi res canvas<canvas width="300" height="200"></canvas>300pxThursday, May 16, 13
    • hi res canvasvar devPxRatio = window.devicePixelRatio;var canvasPxRatio =document.querySelector("canvas").getContext("2d").webkitBackingStorePixelRatio;Thursday, May 16, 13
    • hi res canvas<canvas width="300" height="200"></canvas>300pxdevPxRatio = 2canvasPxRatio = 1Thursday, May 16, 13
    • hi res canvas<canvas width="300" height="200"></canvas>300pxdevPxRatio >= 1canvasPxRatio = undefinedThursday, May 16, 13
    • Solution #1hi res canvasThursday, May 16, 13
    • hi res canvas<meta name="viewport" content="width=640"><canvas width="600" height="400"></canvas>600pxThursday, May 16, 13
    • Solution #2hi res canvasThursday, May 16, 13
    • hi res canvas<script>document.querySelector("canvas").getContext("2d").setScale(2, 2);</script>300pxThursday, May 16, 13
    • hi res canvas<canvas width="600" height="400"></canvas>300px<script>document.querySelector("canvas").getContext("2d").setScale(2, 2);</script>Thursday, May 16, 13
    • 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
    • multi-platform &multi-resolutionThursday, May 16, 13
    • execution &memoryThursday, May 16, 13
    • UItruly numeric fieldThursday, May 16, 13
    • numeric<input type="number">Thursday, May 16, 13
    • numeric<input type="number">Thursday, May 16, 13
    • numeric<input type="number">Thursday, May 16, 13
    • SolutionThursday, May 16, 13
    • numeric<input type="number"pattern="[0-9]*">Thursday, May 16, 13
    • numeric<input type="password"pattern="[0-9]*">Thursday, May 16, 13
    • UIrich editorThursday, May 16, 13
    • rich editor<ul contenteditable><li>First item</ul>Thursday, May 16, 13
    • rich editor<ul contenteditable><li>First item</ul>Thursday, May 16, 13
    • rich editor<ul contenteditable><li>First item</ul>Thursday, May 16, 13
    • UIbackground tabresurrectionThursday, May 16, 13
    • backgroundThursday, May 16, 13
    • backgroundThursday, May 16, 13
    • Thursday, May 16, 13
    • <blink>Welcome to my website!</blink>Thursday, May 16, 13
    • <bgsound src="welcome.wav">Thursday, May 16, 13
    • <font family="Arial" size="20">Thursday, May 16, 13
    • background<meta http-equiv="refresh"content="60">Thursday, May 16, 13
    • background<meta http-equiv="refresh" content="2">Thursday, May 16, 13
    • 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
    • Thursday, May 16, 13
    • backgroundThursday, May 16, 13
    • DISCLAIMERThursday, May 16, 13
    • only from iOS 6.1(5.0+ similar)Thursday, May 16, 13
    • UIimages for differentscreen densitiesThursday, May 16, 13
    • screen densities<img src="photo.png" width="300">Thursday, May 16, 13
    • screen densitiesThursday, May 16, 13
    • 300 CSS pixels300 1.00390 1.30450 1.50600 2.00672 2.24900 3.00device px px ratioscreen densitiesThursday, May 16, 13
    • Solution #1Thursday, May 16, 13
    • screen densitiesuse vector images<img src="photo.svg" width="300"><svg></svg>@font-face {}Thursday, May 16, 13
    • screen densitiesThursday, May 16, 13
    • screen densitiesThursday, May 16, 13
    • Solution #2Thursday, May 16, 13
    • screen densities<img src="photo.png" width="300">if (window.devicePixelRatio > 1.5) {// change URL}Thursday, May 16, 13
    • Solution #3Thursday, May 16, 13
    • 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
    • Solution #4Thursday, May 16, 13
    • screen densities<div id="photoContainer">#photoContainer {background-image: url(photo-lo.png);width: 300px; height: 200px;}Thursday, May 16, 13
    • 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
    • screen densities<div id="photoContainer">@media (-webkit-min-device-pixel-ratio: 1.5),(min--moz-device-pixel-ratio: 1.5) {}Thursday, May 16, 13
    • 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
    • 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
    • always queryon ranges@media (-webkit-device-pixel-ratio: 2)Thursday, May 16, 13
    • always queryon ranges@media (-webkit-min-device-pixel-ratio: 1.7)Thursday, May 16, 13
    • find the balance300x300 900x900Thursday, May 16, 13
    • 2- deviceinteraction hacksThursday, May 16, 13
    • devicemedia captureThursday, May 16, 13
    • media capture<input type="file">Thursday, May 16, 13
    • SolutionThursday, May 16, 13
    • media capture<input type="file" accept="image/*"><input type="file" accept="video/*"><input type="file" accept="audio/*">Thursday, May 16, 13
    • 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
    • media captureLive demoThursday, May 16, 13
    • deviceinteracting withnative appsThursday, May 16, 13
    • native integrationThursday, May 16, 13
    • Thursday, May 16, 13
    • Solution, part IThursday, May 16, 13
    • DONT DO THATThursday, May 16, 13
    • Solution, part IIThursday, May 16, 13
    • native integration<meta name="apple-itunes-app"content="app-id=999">Thursday, May 16, 13
    • native integrationThursday, May 16, 13
    • native integration<meta name="apple-itunes-app"content="app-id=999"><meta name="app-argument"content="">Thursday, May 16, 13
    • native integration<meta name="msApplication-ID"content="App"><meta name="msApplication-PackageFamilyName"content="myPackage">Thursday, May 16, 13
    • native integrationThursday, May 16, 13
    • native integrationThursday, May 16, 13
    • native integrationThursday, May 16, 13
    • native integration<meta name="msApplication-ID"content="App"><meta name="msApplication-PackageFamilyName"content="myPackage"><meta name="msApplication-Arguments"content="">Thursday, May 16, 13
    • no apino androidThursday, May 16, 13
    • Solution, part IIIThursday, May 16, 13
    • native integration<a href="customprotocol://">Open app</a>Thursday, May 16, 13
    • native integration<a href="twitter://post?message=HTML5">Tweet this</a>Thursday, May 16, 13
    • native integrationThursday, May 16, 13
    • native integrationfunction tweet() {location.href="twitter://post?message=HTML5";setTimeout(function() {location.href="postCall.html";}, 1000);}Thursday, May 16, 13
    • native integrationThursday, May 16, 13
    • native integrationfunction tweet() {iframe.location.href="twitter://post?message=HTML5";setTimeout(function() {appNotInstalled();}, 1000);}Thursday, May 16, 13
    • devicepush notificationThursday, May 16, 13
    • push<a href="suscription.passbook">Subscribe to this site</a>Thursday, May 16, 13
    • pushThursday, May 16, 13
    • pushThursday, May 16, 13
    • 3- enhancing yourapp hacksThursday, May 16, 13
    • enhance your appiOS home screen titleThursday, May 16, 13
    • home screenThursday, May 16, 13
    • home screenThursday, May 16, 13
    • home screen<title>My long title for SEO</title><meta name="apple-web-app-title"content="My App">UNDOCUMENTEDThursday, May 16, 13
    • enhance your appIE10 Live TileThursday, May 16, 13
    • live tileThursday, May 16, 13
    • live tileThursday, May 16, 13
    • live tile<meta name="msapplication-TileImage"content="tile.png"><meta name="msapplication-TileColor"content="#ef0303">Thursday, May 16, 13
    • enhance your appYouve said live tile!!!Thursday, May 16, 13
    • live tile<meta name="msapplication-badge"content="frequency=60;polling-uri=XXX">Thursday, May 16, 13
    • live tile<meta name="msapplication-badge"content="frequency=60;polling-uri=XXX"><?xml version="1.0" ?><badge value="3" />Thursday, May 16, 13
    • live tile<meta name="msapplication-badge"content="frequency=60;polling-uri=XXX"><?xml version="1.0" ?><badge value="newMessage" />Thursday, May 16, 13
    • enhance your appStorage limitsThursday, May 16, 13
    • storageAppCache, localStorage,WebSQL, IDBThursday, May 16, 13
    • storageDifferent domains,iframes andCross Document Messaging APIThursday, May 16, 13
    • storageThursday, May 16, 13
    • this might not workin the futureThursday, May 16, 13
    • do you really needmore space?Thursday, May 16, 13
    • 4- toolsThursday, May 16, 13
    • ToolsBandwidthsimulatorsThursday, May 16, 13
    • netlimiter.comThursday, May 16, 13
    • slowyapp.comThursday, May 16, 13
    • charlesproxy.comThursday, May 16, 13
    • ToolsVirtual Mobile LabsThursday, May 16, 13
    • developer.nokia.comThursday, May 16, 13
    • developer.samsung.comThursday, May 16, 13
    • keynotedeviceanywhere.comThursday, May 16, 13
    • most used keycombinations?Thursday, May 16, 13
    • Thursday, May 16, 13
    • Thursday, May 16, 13
    • ToolsLive ReloadThursday, May 16, 13
    • livereload.comThursday, May 16, 13
    • wrapping upThursday, May 16, 13
    • we need hacks because• browsers are different• no enough information• undocumented features• buggyThursday, May 16, 13
    • however• usability and Performance matters• be careful• your app should work anyway• use feature detectionThursday, May 16, 13
    • 1 fullscreen2 snapped mode3 hires canvas4 numeric field5 rich editor6 background tab7 images & densities8 html media capture9 push notificationA home screen titleB live tileC storage limitsD bandwidth simulatorsE virtual mobile labsF live reloadThursday, May 16, 13
    • Thursday, May 16, 13
    • “change is the only constant“HeraclitusThursday, May 16, 13
    • you can reach a goodexperiencePictures)from)freedigitalphotos.net)thank you!firtman@gmail.com@firtfirt.mobi/pmwThursday, May 16, 13