This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size.
Smartphone icons created by Freepik - Flaticon
JavaScript can change the style of an HTML element.
onclick="document.getElementById('demo').style.fontSize='35px'"
In the Cascading Style Sheet lesson: 15.2 CSS Media Queries I learned to display specific messages on devices of specific sizes but not on devices with larger or smaller screens. Also in the CSS segment, I was introduced to font-size on smart phones. In the HTML segment, I learned how to change font-size of a specific element using JavaScript. Since 4.4 HTML JavaScript - A Taste of JavaScript, I have combined what I learned in both lessons to make a button that only displays on screens that are 500px wide or less, that allows cell phone users to increase the font-size of the web pages to make them easier to read.
I discovered all I had to do to make the whole site mobile accessible was to add
@media screen and (min-width: 800px) {
body {
font-size: 100%;
}
}
@media screen and (max-width: 799px) {
body {
font-size: 4vw;
}
}
@media screen and (max-width: 600px) {
body {
font-size: 5vw;
}
}
to my style sheet to make my whole site mobile accessible. No need for JavaScript to switch the style sheets and no need for a mobile specific style sheet. However, some people may still find the font-size too large or too small on their mobile devices. Eventually I will provide a button for making the font-size smaller and another to make it bigger.