niels leenheer - weird browsers - code.talks 2015
TRANSCRIPT
![Page 1: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/1.jpg)
?weird browsers?code.talks 2015 — september 30th 2015
![Page 2: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/2.jpg)
![Page 3: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/3.jpg)
![Page 4: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/4.jpg)
this slide is inspirational as fuck
![Page 5: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/5.jpg)
![Page 6: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/6.jpg)
![Page 7: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/7.jpg)
402Edge 12
400Safari 9
521Chrome 45
466Firefox 41
5550
desktop browsers results on html5test.com
![Page 8: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/8.jpg)
402Edge 12
400Safari 9
466Firefox 41
5550
desktop browsers results on html5test.com
521Chrome 45
![Page 9: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/9.jpg)
402Edge 12
400Safari 9
521Chrome 45
466Firefox 41
5550
desktop browsers results on html5test.com
16Internet Explorer 6
458Edge 13
336Internet Explorer 11
![Page 10: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/10.jpg)
![Page 11: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/11.jpg)
?weird browsers?code.talks 2015 — september 30th 2015
![Page 12: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/12.jpg)
browsers and devices that do notadhere to current expectations
![Page 13: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/13.jpg)
if ('ontouchstart' in window) {
element.addEventListener(‘touchstart’, function(e) { ... });
}else { element.addEventListener(‘click’, function(e) { ... });
}
![Page 14: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/14.jpg)
![Page 15: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/15.jpg)
?weird browsers?
![Page 16: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/16.jpg)
?weird browsers?
![Page 17: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/17.jpg)
game consoles
![Page 18: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/18.jpg)
portable game consoles
![Page 19: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/19.jpg)
smart tvs
![Page 20: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/20.jpg)
e-readers
![Page 21: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/21.jpg)
smartwatches
![Page 22: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/22.jpg)
photo cameras
![Page 23: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/23.jpg)
cars
And
re J
ay M
eiss
ner
![Page 24: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/24.jpg)
comparable with mobile before the iphone and android
everybody is trying to figure it out
![Page 25: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/25.jpg)
![Page 26: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/26.jpg)
![Page 27: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/27.jpg)
smart tvs, set-top boxes and consoles
![Page 28: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/28.jpg)
“big screen browsers”
![Page 29: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/29.jpg)
![Page 30: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/30.jpg)
television browsers are pretty good
the last generation of television sets use operating systems that originate from mobile
![Page 31: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/31.jpg)
418LG WebOS
281Google TV
238LG Netcast
465Samsung Tizen
449Opera Devices
301Panasonic
Viera
smart tv results on html5test.com
5550
414PanasonicFirefox OS
407Samsung
2014
![Page 32: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/32.jpg)
328Playstation 4
53Playstation 3
309Playstation TV
98Xbox 360
286Xbox One
311Wii U
66Wii
5550
console results on html5test.com
![Page 33: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/33.jpg)
![Page 34: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/34.jpg)
1control
![Page 35: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/35.jpg)
the biggest challenge of of television browsers
![Page 36: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/36.jpg)
navigation (without mouse or touchscreen)
![Page 37: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/37.jpg)
d-pad
![Page 38: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/38.jpg)
navigation with the d-pad
![Page 39: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/39.jpg)
but it can be worse: moving the cursor with the arrow keys
![Page 40: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/40.jpg)
alternatives
![Page 41: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/41.jpg)
analog controllers
![Page 42: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/42.jpg)
remotes with trackpad
![Page 43: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/43.jpg)
remotes with airmouse
![Page 44: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/44.jpg)
second screen
![Page 45: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/45.jpg)
many manufacturers also create apps for controlling the smart tv, console or set-top box
![Page 46: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/46.jpg)
![Page 47: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/47.jpg)
![Page 48: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/48.jpg)
![Page 49: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/49.jpg)
text input (without keyboard)
![Page 50: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/50.jpg)
d-pads
![Page 51: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/51.jpg)
text input with the d-pad
![Page 52: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/52.jpg)
alternatives
![Page 53: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/53.jpg)
remotes with keyboards
![Page 54: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/54.jpg)
wireless keyboards
![Page 55: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/55.jpg)
and apps
![Page 56: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/56.jpg)
![Page 57: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/57.jpg)
![Page 58: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/58.jpg)
gesture control (throw your hands up in the air,
and wave ’em like you just don’t care)
![Page 59: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/59.jpg)
navigation with gesture control
![Page 60: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/60.jpg)
can we control these input methods directly from javascript?
![Page 61: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/61.jpg)
the d-pad
maybe
![Page 62: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/62.jpg)
keyboard events
window.addEventListener("keypress", function(e) { e.preventDefault(); // no navigation ...
});
1
![Page 63: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/63.jpg)
the gamepad
maybe
![Page 64: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/64.jpg)
the gamepad api
var gamepads = navigator.getGamepads();for (var i = 0; i < gamepads.length; i++) { ...}
1
![Page 65: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/65.jpg)
wii u api
window.setInterval(function() { var state = window.wiiu.gamepad.update(); ...
}, 100);
2
![Page 66: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/66.jpg)
the webcam
no*
![Page 67: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/67.jpg)
gestures
no*
![Page 68: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/68.jpg)
2the difference between a television and a monitor
![Page 69: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/69.jpg)
overscan (let’s make it a bit more complicated)
![Page 70: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/70.jpg)
due to historical reasons televisions will not show the borders of the image
![Page 71: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/71.jpg)
the television enlarges all images from the hdmi input by 5%
1920 pixels
![Page 72: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/72.jpg)
the television enlarges all images from the hdmi input by 5%
1920 pixels
![Page 73: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/73.jpg)
the image is then cropped to 1920 by 1080 pixels
![Page 74: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/74.jpg)
the image is then cropped to 1920 by 1080 pixels
![Page 75: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/75.jpg)
overscan causes blurry output
+5%
![Page 76: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/76.jpg)
solution 1
overscan correction
![Page 77: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/77.jpg)
the browser does not use the edges of the image
1920 pixels
![Page 78: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/78.jpg)
the television will enlarge the image by 5%
1920 pixels
![Page 79: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/79.jpg)
and the content is now fully visible, the unused border is cropped out of the final image
![Page 80: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/80.jpg)
but not every television set enlarges the image by exactly 5%, this can vary between
manufacturers and models
![Page 81: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/81.jpg)
configure the correct overscan correction in the system preferences
![Page 82: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/82.jpg)
the playstation 4 will always show the browser without overscan correction in full screen mode
![Page 83: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/83.jpg)
the playstation 4 will always show the browser without overscan correction in full screen mode
![Page 84: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/84.jpg)
solution 2
no overscan
![Page 85: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/85.jpg)
it is possible to disable overscan on many television sets
‘screen fit’, ‘pixel perfect’ or ‘just scan’
![Page 86: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/86.jpg)
the playstation 3 always shows the browser with overscan correction
![Page 87: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/87.jpg)
the viewport (i really need some aspirine!)
![Page 88: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/88.jpg)
the visual viewport determines which part of the website will be visible
measured in device pixels
the visual viewport
![Page 89: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/89.jpg)
the visual viewport determines which part of the website will be visible
measured in device pixels
the visual viewport
![Page 90: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/90.jpg)
the visual viewport
the visual viewport determines which part of the website will be visible
measured in device pixels
![Page 91: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/91.jpg)
the layout viewport
the layout viewport determines the width in css pixels on which the site will be rendered
![Page 92: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/92.jpg)
the layout viewport
the layout viewport determines the width in css pixels on which the site will be rendered
![Page 93: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/93.jpg)
the layout viewport
the layout viewport determines the width in css pixels on which the site will be rendered
![Page 94: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/94.jpg)
the default layout viewport is different on every smart tv, console or set-top box
between 800 and 1920 css pixels
![Page 95: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/95.jpg)
it is possible to change the width of the layout viewport with the ‘meta viewport’ tag
<meta name="viewport" content=“width=device-width">
<meta name="viewport" content="width=1024">
physical device pixels
device scale factor
![Page 96: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/96.jpg)
complication:meta viewport is not supported
it is not possible to get the same layout viewport width in all of the different browsers
![Page 97: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/97.jpg)
complication:
device pixel ratio is not supported there is no proper way to show images with the same
resolution as the physical screen
![Page 98: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/98.jpg)
nintendo wii
800 pixels
![Page 99: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/99.jpg)
nintendo wii u
980 pixels
![Page 100: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/100.jpg)
lg webos
960 pixels
![Page 101: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/101.jpg)
google tv
1024 pixels
![Page 102: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/102.jpg)
microsoft xbox 360
1041 of 1050 pixels
![Page 103: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/103.jpg)
microsoft xbox one
1200 of 1236 pixels
![Page 104: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/104.jpg)
lg netcast
1226 pixels
![Page 105: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/105.jpg)
sony playstation 3
1824 pixels
![Page 106: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/106.jpg)
sony playstation 4
1920 pixels
![Page 107: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/107.jpg)
Nintendo Wii 800
LG WebOS 960
Nintendo Wii U 980
Philips 2014 series 980
Google TV 1024
Playstation TV 1024
Samsung Tizen 1024
Xbox 360 1051
Xbox One 1200
LG Netcast 1226
Panasonic Viera 1256
Opera Devices 1280
Samsung 2014 series 1280
Panasonic Firefox OS 1536
Playstation 3 1824
Playstation 4 1920
![Page 108: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/108.jpg)
device pixels != device pixels (of course not)
![Page 109: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/109.jpg)
sometimes devices pixels are not physical devices pixels, but virtual device pixels
the browser renders in a lower resolution which is upscaled to the resolution of the display
![Page 110: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/110.jpg)
3distance to the screen
![Page 111: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/111.jpg)
“Make fonts and graphics on the site larger to account for viewing distance. People sit
proportionally farther from a TV than from a computer monitor of the same size.”
– Internet Explorer for Xbox One Developer Guide
https://msdn.microsoft.com/en-us/library/dn532261(v=vs.85).aspx
![Page 112: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/112.jpg)
fluid design++ the size of the contents is determined
by the width of the viewport
![Page 113: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/113.jpg)
use percentages for positioning
.left { width: 60%; }
.right { left: 60%; width: 40%; }
1
![Page 114: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/114.jpg)
base the fontsize on the viewport
document.body.style.fontSize = ((window.innerWidth / 1920) * 300) + '%';
2
![Page 115: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/115.jpg)
or maybe use viewport units – with polyfill
body { font-size: 3vw; } .left { width: 60vw; height: 100vh; } .right { width: 40vw; height: 100vh; }
3
![Page 116: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/116.jpg)
use a safe margin around the contents
body { padding: 5%; }
4
![Page 117: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/117.jpg)
youtube tv website
![Page 118: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/118.jpg)
identifying smart tv’s (css for televisions)
![Page 119: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/119.jpg)
css media types
@media tv { body { font-size: 300%;
}
}
1 ×
![Page 120: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/120.jpg)
css media types
all television browsers use the css media type ‘screen’
1
![Page 121: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/121.jpg)
screen size
if (screen.width == 1920 && screen.height == 1080) { document.body.className += " television"; }
2 ×
![Page 122: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/122.jpg)
screen size
monitors and phones often use hd resolutions, television browsers often use other resolutions
2
![Page 123: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/123.jpg)
useragent sniffing
if (navigator.userAgent.search(/TV/i) >= 0) { document.body.className += " television"; }
3 ×
![Page 124: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/124.jpg)
useragent sniffing
not all smart tv’s are recognisable
Mozilla/5.0 (X11; Linux; ko-KR) AppleWebKit/534.26+ (KHTML, like Gecko) Version/5.0 Safari/534.26+
3
![Page 125: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/125.jpg)
couch mode
the only reliable way to optimise a website for television is to make two different websites…
or give the user the ability to switch on couch mode
4
![Page 126: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/126.jpg)
4be careful with feature detection
![Page 127: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/127.jpg)
“Basically every feature that talks to the operating system or hardware, is suspect.”
– Me
http://blog.html5test.com/2015/08/the-problems-with-feature-detection/
![Page 128: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/128.jpg)
if (!!navigator.geolocation) {
navigator.geolocation.getCurrentPosition( success, failure );
}else { // alternative }
![Page 129: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/129.jpg)
if (!!navigator.geolocation) {
navigator.geolocation.getCurrentPosition( success, failure );
}
1 failure is called with a “permission denied” error code
2 no callback at all to success or failure
![Page 130: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/130.jpg)
if (!!navigator.geolocation) {
navigator.geolocation.getCurrentPosition( success, failure );
}
3 success is called with longitude = 0 and latitude = 0
4 success is called with the coordinates of Mountain View, USA
![Page 131: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/131.jpg)
is there a future for web apps on the big screen?
![Page 132: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/132.jpg)
![Page 133: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/133.jpg)
the new apple tv does not ship with a browser by default
![Page 134: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/134.jpg)
android tv does not ship with a browser by default
![Page 135: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/135.jpg)
![Page 136: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/136.jpg)
e-readers
![Page 137: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/137.jpg)
e-reader results on html5test.com
5550
196Pocketbook
280Kobo
157Sony Reader
52 Kindle 3
187Kindle Touch
![Page 138: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/138.jpg)
infrared touch screen
![Page 139: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/139.jpg)
led’s sensors
![Page 140: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/140.jpg)
mouse events
down/up move touch events
amazon kindle touch yes
pocketbook basic touch yes
kobo glow yes yes
sony reader yes yes 1 finger
![Page 141: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/141.jpg)
e-ink screens (slow, slower, slowest)
![Page 142: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/142.jpg)
microscopic electrostatic charged balls
![Page 143: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/143.jpg)
microscopic electrostatic charged balls
+ –
– +
![Page 144: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/144.jpg)
+ –
– +
microscopic electrostatic charged balls
![Page 145: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/145.jpg)
microscopic electrostatic charged balls
![Page 146: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/146.jpg)
![Page 147: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/147.jpg)
maybe css animations and transitions weren’t such a great idea after all
![Page 148: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/148.jpg)
two completely different colors can look exactly the same in black and white
![Page 149: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/149.jpg)
two completely different colors can look exactly the same in black and white
![Page 150: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/150.jpg)
identifying e-readers (css for e-ink screens)
![Page 151: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/151.jpg)
css monochrome mediaquery
@media (monochrome) { ...
}
1 ×
![Page 152: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/152.jpg)
css monochrome mediaquery
all tested e-readers act like they have a color screen
1
![Page 153: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/153.jpg)
useragent sniffing
there is no universal marker in the useragent string, but we can recognise individual manufacturers and models
2
![Page 154: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/154.jpg)
![Page 155: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/155.jpg)
portable consoles
![Page 156: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/156.jpg)
66Nintendo DSi
309Sony PlayStation Vita
311New Nintendo 3DS
portable console results html5test.com
5550
80Nintendo 3DS
![Page 157: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/157.jpg)
![Page 158: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/158.jpg)
two screens (surprisingly normal)
![Page 159: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/159.jpg)
a dual visual viewport(the bottom one is the primary visual viewport)
3d screen, but only 2d is supported in the browser
resistive touch screen
![Page 160: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/160.jpg)
a dual visual viewport(the bottom one is the primary visual viewport)
3d screen, but only 2d is supported in the browser
resistive touch screen
![Page 161: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/161.jpg)
a dual visual viewport(the bottom one is the primary visual viewport)
3d screen, but only 2d is supported in the browser
resistive touch screen
![Page 162: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/162.jpg)
a dual visual viewport(the bottom one is the primary visual viewport)
3d screen, but only 2d is supported in the browser
resistive touch screen
![Page 163: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/163.jpg)
![Page 164: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/164.jpg)
![Page 165: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/165.jpg)
?weird browsers!
![Page 166: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/166.jpg)
“We cannot predict future behavior from a current experience that sucks”
– Jason Grigsby
http://blog.cloudfour.com/on-the-device-context-continuum/
![Page 167: Niels Leenheer - Weird browsers - code.talks 2015](https://reader031.vdocuments.mx/reader031/viewer/2022013005/587452d71a28abd53e8b7057/html5/thumbnails/167.jpg)
thank youniels leenheer
@html5test