This document discusses various "weird browsers" including those found on smart TVs, game consoles, e-readers, and portable gaming devices. It notes that each has unique characteristics that make web development challenging, such as non-standard screen sizes and resolutions, unusual input methods like d-pads, and performance limitations of technologies like e-ink screens. The document provides examples of how features like viewports, touch support, and media queries often behave differently in these environments than traditional desktop browsers. It emphasizes that reliable device detection is difficult and feature detection may not work as expected.

1. ?weird browsers?
code.talks 2015 — september 30th 2015

4. this slide is
inspirational as fuck

7. 402
Edge 12
400
Safari 9
521
Chrome 45
466
Firefox 41
5550
desktop browsers results on html5test.com

8. 402
Edge 12
400
Safari 9
466
Firefox 41
5550
desktop browsers results on html5test.com
521
Chrome 45

9. 402
Edge 12
400
Safari 9
521
Chrome 45
466
Firefox 41
5550
desktop browsers results on html5test.com
16
Internet Explorer 6
458
Edge 13
336
Internet Explorer 11

11. ?weird browsers?
code.talks 2015 — september 30th 2015

12. browsers and devices that do not
adhere to current expectations

13. if ('ontouchstart' in window) {
element.addEventListener(‘touchstart’, function(e) {
...
});
}
else {
element.addEventListener(‘click’, function(e) {
...
});
}

15. ?weird browsers?

16. ?weird browsers?

17. game consoles

18. portable game consoles

19. smart tvs

20. e-readers

21. smartwatches

22. photo cameras

23. cars
AndreJayMeissner

24. comparable with mobile before
the iphone and android
everybody is trying to figure it out

27. smart tvs, set-top boxes
and consoles

28. “big screen browsers”

30. television browsers are pretty good
the last generation of television sets use
operating systems that originate from mobile

31. 418
LG WebOS
281
Google TV
238
LG Netcast
465
Samsung Tizen
449
Opera Devices
301
Panasonic
Viera
smart tv results on html5test.com
5550
414
Panasonic
Firefox OS
407
Samsung
2014

32. 328
Playstation 4
53
Playstation 3
309
Playstation TV
98
Xbox 360
286
Xbox One
311
Wii U
66
Wii
5550
console results on html5test.com

34. 1
control

35. the biggest challenge of
of television browsers

36. navigation
(without mouse or touchscreen)

37. d-pad

38. navigation with the d-pad

39. but it can be worse:
moving the cursor with the arrow keys

40. alternatives

41. analog controllers

42. remotes with trackpad

43. remotes with airmouse

44. second screen

45. many manufacturers also create apps for
controlling the smart tv, console or set-top box

49. text input
(without keyboard)

50. d-pads

51. text input with the d-pad

52. alternatives

53. remotes with keyboards

54. wireless keyboards

55. and apps

58. gesture control
(throw your hands up in the air,
and wave ’em like you just don’t care)

59. navigation with gesture control

60. can we control these input methods
directly from javascript?

61. the d-pad
maybe

62. keyboard events
window.addEventListener("keypress", function(e) {
e.preventDefault(); // no navigation
...
});
1

63. the gamepad
maybe

64. the gamepad api
var gamepads = navigator.getGamepads();
for (var i = 0; i < gamepads.length; i++) {
...
}
1

65. wii u api
window.setInterval(function() {
var state = window.wiiu.gamepad.update();
...
}, 100);
2

66. the webcam
no*

67. gestures
no*

68. 2
the difference between
a television and a monitor

69. overscan
(let’s make it a bit more complicated)

70. due to historical reasons televisions will
not show the borders of the image

71. the television enlarges all images
from the hdmi input by 5%
1920 pixels

72. the television enlarges all images
from the hdmi input by 5%
1920 pixels

73. the image is then cropped to
1920 by 1080 pixels

74. the image is then cropped to
1920 by 1080 pixels

75. overscan causes blurry output
+5%

76. solution 1
overscan correction

77. the browser does not use
the edges of the image
1920 pixels

78. the television will enlarge
the image by 5%
1920 pixels

79. and the content is now fully visible, the unused
border is cropped out of the final image

80. but not every television set enlarges the
image by exactly 5%, this can vary between
manufacturers and models

81. configure the correct overscan correction
in the system preferences

82. the playstation 4 will always show the browser
without overscan correction in full screen mode

83. the playstation 4 will always show the browser
without overscan correction in full screen mode

84. solution 2
no overscan

85. it is possible to disable overscan
on many television sets
‘screen fit’, ‘pixel perfect’ or ‘just scan’

86. the playstation 3 always shows the
browser with overscan correction

87. the viewport
(i really need some aspirine!)

88. the visual viewport
determines which
part of the website
will be visible
measured in
device pixels
the visual viewport

89. the visual viewport
determines which
part of the website
will be visible
measured in
device pixels
the visual viewport

90. the visual viewport
the visual viewport
determines which
part of the website
will be visible
measured in
device pixels

91. the layout viewport
the layout viewport
determines the
width in css pixels
on which the site
will be rendered

92. the layout viewport
the layout viewport
determines the
width in css pixels
on which the site
will be rendered

93. the layout viewport
the layout viewport
determines the
width in css pixels
on which the site
will be rendered

94. the default layout viewport is different on
every smart tv, console or set-top box
between 800 and 1920 css pixels

95. 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

96. complication:
meta viewport is not supported
it is not possible to get the same layout viewport
width in all of the different browsers

97. complication:
device pixel ratio is not supported
there is no proper way to show images with the same
resolution as the physical screen

98. nintendo wii
800 pixels

99. nintendo wii u
980 pixels

100. lg webos
960 pixels

101. google tv
1024 pixels

102. microsoft xbox 360
1041 of 1050 pixels

103. microsoft xbox one
1200 of 1236 pixels

104. lg netcast
1226 pixels

105. sony playstation 3
1824 pixels

106. sony playstation 4
1920 pixels

107. 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

108. device pixels != device pixels
(of course not)

109. 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

110. 3
distance to the screen

111. “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

112. fluid design++
the size of the contents is determined
by the width of the viewport

113. use percentages for positioning
.left { width: 60%; }
.right { left: 60%; width: 40%; }
1

114. base the fontsize on the viewport
document.body.style.fontSize =
((window.innerWidth / 1920) * 300) + '%';
2

115. or maybe use viewport units – with polyfill
body { font-size: 3vw; }
.left { width: 60vw; height: 100vh; }
.right { width: 40vw; height: 100vh; }
3

116. use a safe margin around the contents
body {
padding: 5%;
}
4

117. youtube tv website

118. identifying smart tv’s
(css for televisions)

119. css media types
@media tv {
body {
font-size: 300%;
}
}
1
×

120. css media types
all television browsers use the
css media type ‘screen’
1

121. screen size
if (screen.width == 1920 && screen.height == 1080) {
document.body.className += " television";
}
2
×

122. screen size
monitors and phones often use
hd resolutions, television browsers
often use other resolutions
2

123. useragent sniffing
if (navigator.userAgent.search(/TV/i) >= 0) {
document.body.className += " television";
}
3
×

124. 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

125. 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

126. 4
be careful with
feature detection

127. “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/

128. if (!!navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
success, failure
);
}
else {
// alternative
}

129. 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

130. 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

131. is there a future for web apps
on the big screen?

133. the new apple tv does not ship
with a browser by default

134. android tv does not ship
with a browser by default

136. e-readers

137. e-reader results on html5test.com
5550
196
Pocketbook
280
Kobo
157
Sony Reader
52
Kindle 3
187
Kindle Touch

138. infrared touch screen

139. led’s sensors

140. 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

141. e-ink screens
(slow, slower, slowest)

142. microscopic electrostatic charged balls

143. microscopic electrostatic charged balls
+ –
– +

144. + –
– +
microscopic electrostatic charged balls

145. microscopic electrostatic charged balls

147. maybe css animations and transitions
weren’t such a great idea after all

148. two completely different colors can look
exactly the same in black and white

149. two completely different colors can look
exactly the same in black and white

150. identifying e-readers
(css for e-ink screens)

151. css monochrome mediaquery
@media (monochrome) {
...
}
1
×

152. css monochrome mediaquery
all tested e-readers act like
they have a color screen
1

153. useragent sniffing
there is no universal marker in the
useragent string, but we can recognise
individual manufacturers and models
2

155. portable consoles

156. 66
Nintendo DSi
309
Sony PlayStation Vita
311
New Nintendo 3DS
portable console results html5test.com
5550
80
Nintendo 3DS

158. two screens
(surprisingly normal)

159. 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

160. 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

161. 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

162. 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

165. ?weird browsers!

166. “We cannot predict future behavior
from a current experience that sucks”
– Jason Grigsby
http://blog.cloudfour.com/on-the-device-context-continuum/

167. thank you
niels leenheer
@html5test