Pro Yearly is on sale from $80 to $50! »

Weird Browsers @ code.talks 2015

De023a9aff4c7a5ede3a81e8c76f17b5?s=47 Niels Leenheer
September 30, 2015

Weird Browsers @ code.talks 2015

Now that everybody builds responsive sites and mobile has become the new normal, are there still any weird browsers left? The latest generation of Smart TV's run on the same operating systems as our mobile devices. How weird can these browsers be? Perhaps Smart TV's aren't as smart as we all would like to think. But there are more weird browsers. How do game console handle your websites and are e-readers really capable of browsing the web?

De023a9aff4c7a5ede3a81e8c76f17b5?s=128

Niels Leenheer

September 30, 2015
Tweet

Transcript

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

  2. None
  3. None
  4. UIJTTMJEFJT JOTQJSBUJPOBMBT fuck

  5. None
  6. None
  7. 402 
 Edge 12 400 
 Safari 9 521 


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


    Firefox 41 555 0 desktop browsers results on html5test.com 521 
 Chrome 45
  9. 402 
 Edge 12 400 
 Safari 9 521 


    Chrome 45 466 
 Firefox 41 555 0 desktop browsers results on html5test.com 16 
 Internet Explorer 6 458 
 Edge 13 336 
 Internet Explorer 11
  10. None
  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) {
 ...
 }); }
  14. None
  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 Andre Jay Meissner

  24. comparable with mobile before 
 the iphone and android everybody

    is trying to figure it out
  25. None
  26. None
  27. smart tvs, set-top boxes and consoles

  28. “big screen browsers”

  29. None
  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 555 0 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 555 0 console results on html5test.com
  33. None
  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
  46. None
  47. None
  48. None
  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

  56. None
  57. None
  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?
  132. None
  133. the new apple tv does not ship 
 with a

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

    default
  135. None
  136. e-readers

  137. e-reader results on html5test.com 555 0 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

  146. None
  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
  154. None
  155. portable consoles

  156. 66 
 Nintendo DSi 309 
 Sony PlayStation Vita 311

    
 New Nintendo 3DS portable console results html5test.com 555 0 80 
 Nintendo 3DS
  157. None
  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
  163. None
  164. None
  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