The document discusses various technical issues encountered with responsive design across different platforms and browsers. It addresses problems with unzooming on Windows Phone, pointer events not working with video in Safari, smaller text width on Android, and page jumps when playing video on mobile. Potential solutions are presented such as using viewport meta tags, fixing heights of parent elements, hiding controls and disabling pointer events. The document also questions attendees about other topics, ideas and observations.

1. Fuckup, fuckups
everywhere...
| Herrmann Jan |

2. O čem se budeme bavit?
-webkit-font-smoothing: antialiased;
WindowsPhone - unzoom - none responsive
Safari - video - pointer-events: none - not work
Android menší šířka textu - none responsive
Page jump mobile with video

3. O čem se budeme bavit?
-webkit-font-smoothing: antialiased;
WindowsPhone - unzoom - none responsive
Safari - video - pointer-events: none - not work
Android menší šířka textu - none responsive
Page jump mobile with video

4. -webkit-font-smoothing
antialiased

5. -webkit-font-smoothing: antialiased;
Design
font-weight: 400;
font-family: Montserrat;

6. -webkit-font-smoothing: antialiased;
Design
font-weight: 400;
font-family: Montserrat;

7. -webkit-font-smoothing: antialiased;
Design
font-weight: 400;
font-family: Montserrat;
Web
font-weight: 400;
font-family: Montserrat;

8. -webkit-font-smoothing: antialiased;
Design
font-weight: 400;
font-family: Montserrat;
Web
font-weight: 400;
font-family: Montserrat;

9. -webkit-font-smoothing: antialiased;
ON

10. -webkit-font-smoothing: antialiased;
OFF - default

13. -webkit-font-smoothing: antialiased;

14. -webkit-font-smoothing: antialiased;
Windows?
SVG

15. -webkit-font-smoothing: antialiased;
Windows?
SVG
SVG?
Datově náročné
Některé až 200kb
Není tak flexibilní, jako ostatní (TTF)
Řádkování, …
Pomalé načítání dlouhých textů

16. -webkit-font-smoothing: antialiased;
Nápady? Připomínky? Postřehy?

17. O čem se budeme bavit?
-webkit-font-smoothing: antialiased;
WindowsPhone - unzoom - none responsive
Safari - video - pointer-events: none - not work
Android menší šířka textu - none responsive
Page jump mobile with video

18. WindowsPhone - unzoom
None-responsive

19. WindowsPhone - unzoom
None-responsive
HTML
<meta name="viewport" content="width=1200">

20. WindowsPhone - unzoom
None-responsive
HTML
<meta name="viewport" content="width=1200">

21. WindowsPhone - unzoom
None-responsive
HTML
<meta name="viewport" content="width=1200">
CSS
@-ms-viewport { width: 1200px !important; }

22. WindowsPhone - unzoom
None-responsive
HTML
<meta name="viewport" content="width=1200">
CSS
@-ms-viewport { width: 1200px !important; }

23. O čem se budeme bavit?
-webkit-font-smoothing: antialiased;
WindowsPhone - unzoom - none responsive
Safari - video - pointer-events: none - not work
Android menší šířka textu - none responsive
Page jump mobile with video

24. Mobile safari - video
Videu nelze zrušit reakci na události

25. Mobile safari - video
Videu nelze zrušit reakci na události
<video id="myVideo" preload autoplay loop muted></video>
pointer-events: none;

26. Mobile safari - video
Videu nelze zrušit reakci na události
<video id="myVideo" preload autoplay loop muted></video>
pointer-events: none;

27. Mobile safari - video
Videu nelze zrušit reakci na události
<video id="myVideo" preload autoplay loop muted></video>
pointer-events: none;
To stejné platí pro rodiče tohoto elementu!

28. Mobile safari - video
Modal okno
pointer-events: none;
opacity: 0;

29. Mobile safari - video
Modal okno
pointer-events: none;
opacity: 0;
Video je stále aktivní

30. Mobile safari - video
Modal okno
pointer-events: none;
opacity: 0;
Video je stále aktivní

31. O čem se budeme bavit?
-webkit-font-smoothing: antialiased;
WindowsPhone - unzoom - none responsive
Safari - video - pointer-events: none - not work
Android menší šířka textu - none responsive
Page jump mobile with video

32. Android menší šířka textu
None-responsive
Android ≤ 4.3

33. Android menší šířka textu
None-responsive
Android ≤ 4.3

34. Samsung Galaxy Note 10.1 Android 4.0

35. Samsung Galaxy Note 3 Android 4.3
Samsung Galaxy Note 10.1 Android 4.0

36. Android menší šířka textu
Jak?

37. Android menší šířka textu
Parent – fix height
Problem:
občas ios
občas andorid
Bullshit solution

38. Android menší šířka textu
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg
AAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAA
IAAAoAAggA9GkAAAAASUVORK5CYII=

39. Android menší šířka textu
* {
background:url(data:image/p
ng;base64,iVBORw0KGgoAAAAN
SUhEUgAAAAEAAAABCAYAAAAf
FcSJAAAAC0lEQVQIW2NkAAIAA
AoAAggA9GkAAAAASUVORK5C
YII=);
}

40. O čem se budeme bavit?
-webkit-font-smoothing: antialiased;
WindowsPhone - unzoom - none responsive
Safari - video - pointer-events: none - not work
Android menší šířka textu - none responsive
Page jump mobile with video

41. Page jump mobile with video
<iframe width="100%" height="540"
src="https://www.youtube.com/embed/QH2-
TGUlwu4?rel=0&controls=0&showinfo=0&ena
blejsapi=1" frameborder="0"
allowfullscreen></iframe>

42. Page jump mobile with video
<iframe width="100%" height="540"
src="https://www.youtube.com/embed/QH2-
TGUlwu4?rel=0&controls=0&showinfo=0&ena
blejsapi=1" frameborder="0"
allowfullscreen></iframe>
controls=0 + video pod foldem
spustit video -> zavřít video
=> scroll dolů o vzdálenost foldu od videa

44. Q&A

45. Děkuji za pozornost
Herrmann Jan
herrmann@webvalley.cz