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

Max Firtman @ﬁrt
BREAKING LIMITS
ON MOBILE
HTML5
Amsterdam, May 16th, 2013
Thursday, May 16, 13

mobile+web developer
maximiliano
@ﬁrt

hacks, why?

1- UI hacks

UI
Full screen

full screen

full screen
4 solutions

full screen
Solution #1

full screen
<meta name="apple-mobile-web-app-capable"
content="yes">

full screen
content="yes">
if (navigator.standalone) { }

content="yes">
<meta name="viewport"
content="width=device-width">

full screen
content="yes">
content="width=320.1">

full screen
content="yes">
content="width=device-width">
content="..."
media="device-height: 568px">

full screen
Solution #2

full screen
@media (orientation: landscape) and (height: 214px),
(orientation: landscape) and (height: 181px)
{
}

full screen
Solution #3
future platforms

full screen
var body = document.documentElement;
if (body.requestFullScreen) {
body.requestFullScreen();
}

full screen
} else if (body.webkitRequestFullScreen) {
body.webkitRequestFullScreen();
}

full screen
} else if (body.webkitRequestFullScreen) {
body.webkitRequestFullScreen();
} else if (body.mozRequestFullScreen) {
body.mozRequestFullScreen();
}

full screen
Solution #4
...

full screen
window.addEventListener("load",
function() { window.scrollTo(0, 0); });
// use with care
document.addEventListener("touchmove",
function(e) { e.preventDefault() });

UI
Snapped mode
Windows 8

snapped mode

snapped mode
@media only screen and (max-width: 400px) {
@-ms-viewport {
width: 320px;
}
}

UI
High resolution
canvas

hi-res canvas
<canvas width="300" height="200">
</canvas>
300px

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

hi res canvas
</canvas>
300px

hi res canvas
var devPxRatio = window.devicePixelRatio;
var canvasPxRatio =
document.querySelector("canvas")
.getContext("2d")
.webkitBackingStorePixelRatio;

hi res canvas
</canvas>
300px
devPxRatio = 2
canvasPxRatio = 1

hi res canvas
</canvas>
300px
devPxRatio >= 1
canvasPxRatio = undefined

Solution #1
hi res canvas

hi res canvas
<meta name="viewport" content="width=640">
</canvas>
600px

Solution #2
hi res canvas

hi res canvas
<script>
.getContext("2d")
.setScale(2, 2);
</script>
300px

hi res canvas
</canvas>
300px
<script>
.getContext("2d")
.setScale(2, 2);
</script>

hi res canvas
<canvas width="600" height="400"
style="width: 300px; height: 200px">
</canvas>
300px
<script>
.getContext("2d")
.setScale(2, 2);
</script>

multi-platform &
multi-resolution

execution &
memory

UI
truly numeric field

numeric
<input type="number">

numeric
<input type="number"
pattern="[0-9]*">

numeric
<input type="password"
pattern="[0-9]*">

UI
rich editor

rich editor
<ul contenteditable>
<li>First item
</ul>

UI
background tab
resurrection

background

<blink>Welcome to my website!</blink>

background
<meta http-equiv="refresh"
content="60">

background
<meta http-equiv="refresh" content="2">

background
<meta http-equiv="refresh" content="2">
<script>
var mr = document.querySelector("meta");
setInterval(function() {
mr.content=mr.content;
}, 1000);
</script>

DISCLAIMER

only from iOS 6.1
(5.0+ similar)

UI
images for diﬀerent
screen densities

screen densities
<img src="photo.png" width="300">

screen densities

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

Solution #1

screen densities
use vector images
<img src="photo.svg" width="300">
<svg></svg>
@font-face {}

Solution #2

screen densities
<img src="photo.png" width="300">
if (window.devicePixelRatio > 1.5) {
// change URL
}

Solution #3

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;
}

Solution #4

screen densities
#photoContainer {
background-image: url('photo-lo.png');
}

screen densities
@media (-webkit-min-device-pixel-ratio: 1.5) {
#photoContainer {
background-image: url('photo-hi.png');
background-size: 100%;
}
}

screen densities
@media (-webkit-min-device-pixel-ratio: 1.5),
(min--moz-device-pixel-ratio: 1.5) {
}

screen densities
(min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 1/2) {
}

screen densities
(min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 1/2),
(min-resolution: 1.5dppx) {
}

always query
on ranges
@media (-webkit-device-pixel-ratio: 2)

always query
on ranges
@media (-webkit-min-device-pixel-ratio: 1.7)

find the balance
300x300 900x900

2- device
interaction hacks

device
media capture

media capture
<input type="file">

media capture
<input type="file" accept="image/*">
<input type="file" accept="video/*">
<input type="file" accept="audio/*">

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)

media capture
Live demo

device
interacting with
native apps

native integration

Solution, part I

DON'T DO THAT

Solution, part II

native integration
<meta name="apple-itunes-app"
content="app-id=999">

native integration
<meta name="apple-itunes-app"
content="app-id=999">
<meta name="app-argument"
content="">

native integration
<meta name="msApplication-ID"
content="App">
<meta name="msApplication-PackageFamilyName"
content="myPackage">

native integration
<meta name="msApplication-ID"
content="App">
<meta name="msApplication-PackageFamilyName"
content="myPackage">
<meta name="msApplication-Arguments"
content="">

no api
no android

Solution, part III

native integration
<a href="customprotocol://">Open app</a>

native integration
<a href="twitter://post?message=HTML5">
Tweet this</a>

native integration
function tweet() {
location.href="twitter://post?message=HTML5";
setTimeout(function() {
location.href="postCall.html";
}, 1000);
}

native integration
function tweet() {
iframe.location.href=
"twitter://post?message=HTML5";
setTimeout(function() {
appNotInstalled();
}, 1000);
}

device
push notification

push
<a href="suscription.passbook">
Subscribe to this site
</a>

3- enhancing your
app hacks

enhance your app
iOS home screen title

home screen

home screen
<title>My long title for SEO</title>
<meta name="apple-web-app-title"
content="My App">
UNDOCUMENTED

enhance your app
IE10 Live Tile

live tile

live tile
<meta name="msapplication-TileImage"
content="tile.png">
<meta name="msapplication-TileColor"
content="#ef0303">

enhance your app
You've said live tile!!!

live tile
<meta name="msapplication-badge"
content="frequency=60;polling-uri=XXX">

live tile
<?xml version="1.0" ?>
<badge value="3" />

live tile
<?xml version="1.0" ?>
<badge value="newMessage" />

enhance your app
Storage limits

storage
AppCache, localStorage,
WebSQL, IDB

storage
Diﬀerent domains,
iframes and
Cross Document Messaging API

this might not work
in the future

do you really need
more space?

Tools
Bandwidth
simulators

netlimiter.com

slowyapp.com

charlesproxy.com

Tools
Virtual Mobile Labs

developer.nokia.com

developer.samsung.com

keynotedeviceanywhere.com

most used key
combinations?

Tools
Live Reload

livereload.com

wrapping up

we need hacks because
• browsers are diﬀerent
• no enough information
• undocumented features
• buggy

however
• usability and Performance matters
• be careful
• your app should work anyway
• use feature detection

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

“change is the only constant“
Heraclitus

you can reach a good
experience
Pictures)from)freedigitalphotos.net)
thank you!
firtman@gmail.com
@firt
firt.mobi/pmw

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

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (18)

Plus de Maximiliano Firtman

Plus de Maximiliano Firtman (20)

Dernier

Dernier (20)

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