User Story
As someone with not the best vision, I increase the font-size on my iPhone by going to Settings -> Display & Brightness -> Text Size -> and moving the slider up. When I open Wikipedia on Safari though, the font size is still pretty small. I could use the Safari "reader-mode", or, I could go to the Settings screen on Mobile Wikipedia and increase the font-size there, but I as an average user, I might not be aware that those settings exists, and besides, I already set the font-size in my System settings.
Acceptance Criteria
- When I increase the font-size in system settings, the font-size on mobile Wikipedia should also increase
- The css rule is well documented, ideally pointing to a URI that we can refer to in future when we wonder "what's this for"
Developer Notes
In order to use the system font-size known in iOS as "Dynamic Type", iOS provides a proprietary CSS font rule for Safari: font: -apple-system-body;.
We could add this to the body tag in order to set the font-size there. More information on this property is available here http://www.interactiveaccessibility.com/blog/text-resizing-web-pages-ios-using-dynamic-type
body {
font: -apple-system-body; 👈 for iOS browsers only
font-family: 'Helvetica Neue','Helvetica','Nimbus Sans L','Arial','Liberation Sans',sans-serif;
line-height: 1.4;
color: #222222;
background: #fff;
-webkit-tap-highlight-color: rgba(0,0,0,0.2);
}QA Steps
Environment: https://en.wikipedia.beta.wmflabs.org
Browser & device: mobile/iOS 9+ Grade A browsers
Skin: minerva
Steps: Warning: Unfortunately, this change affects the scaling of many design elements (text size, button size, etc) and is far-reaching. Therefore, it will be probably difficult to fully QA.
- On your iOS device, goto Settings > General > Accessibility > Larger Text and make sure the font size slider is in the middle (the default setting)
- Visit http://readers-web-staging.wmflabs.org/w/index.php?title=Barack_Obama&mobileaction=toggle_view_mobile in Safari
- Assert that the sizing of the design elements looks the same as production's site https://en.m.wikipedia.org/w/index.php?title=Barack_Obama&mobileaction=toggle_view_mobile
- On your device, goto Settings > General > Accessibility > Larger Text and increase the font size slider at the bottom all the way to the right
- Refresh the page, and assert that the scaling of design elements has increased and that it hasn't broken the design.
- Go back to Settings > General > Accessibility > Larger Text and decrease the font size slider at the bottom all the way to the left.
- Refresh the page, and assert that the scaling of design elements had decreased and that it hasn't broken the design.
- This change will also affect other iOS browsers including Edge, Firefox, and Chrome so it might be a good idea to repeat the steps on those browsers as well (although it should affect those the same way).
