CSS on Mobile, and The Most Important Header Tag
Programming · Apr 25th, 2021
One thing, that I struggled with more than I should have, is making my website look nice on mobile. Problem is, the text on mobile was super inconsistent. Some text was big, some text was small.
Fixing the inconsistency is pretty easy with this CSS:
body{
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
}
But now that everything is consistent, when you view your website on mobile, the text is too small. As it turns out, most mobile browsers "boost" the text size, so that text remains readable. But the Problem with this boosting is, that it is super inconsistent, and you are probably better off by disabling it with the code I posted above.
I tried many things to fix the text size issue, from detecting if you are a using a mobile client or not with JavaScript, to sending the browser a different CSS with PHP (more on PHP in a later chapter), none of which worked in a satisfying way. Then, I found a header tag, which solved this issue immediately. I may present you, the most important HTML Header Tag, which you should probably implement in your website:
<meta name="viewport" content="width=device-width,initial-scale=1" />
So what does it do and how does it fix the text-size issue? CSS has a quirk which I seriously don’t understand: CSS resolution is independent from your device resolution. Let’s say for simplicity’s sake, your desktop pc display is 200 pixels wide. Now you want to implement a button which is 100 pixels wide. It’s only logical to conclude, that this button will fit half of your screen. Now you have a mobile device which is 50 pixels wide, you would assume that the button will the fill the whole screen from left to right. But for some reason, the CSS resolution is larger than the resolution of your mobile device. Thus the button is displayed way smaller than you would expect.
In the image below, left is desktop and right is mobile. Because CSS- and device resolution doesn't match, the Button is smaller on mobile.
The meta tag posted above fixes this, by basically telling the browser that the CSS resolution is the same as the device resolution. If you implement this tag, this button will be properly displayed.
Depending how your website should look like, this may actually be not that important. But if you are going to use one single HTML file for both desktop and mobile (like I do), this tag should do the trick. And once that works, you can now properly work with media queries.
Media queries allow you to adapt your CSS, depending on the devices resolution. Take for example the following CSS:
.myContainer{
background-color: var(--pico-8-red);
}
@media only screen and (max-width: 500px) {
.myContainer{
background-color: var(--pico-8-yellow);
}
}
What this tells your browser, is that the container should only be yellow, if the screen is at maximum 500 pixels wide. Otherwise it will be red. To demonstrate, consider this rectangle:
When you are on desktop, this rectangle is probably red. But when you take your browser into windowed mode and make it smaller, you will notice that it will change its color to yellow. If you are on mobile, it is yellow, if you view this page in vertical. But it will be red, if you view this page in horizontal.
Disclaimer: This demo only works on mobile, if your device is less than 500 pixels wide and more than 500 pixels high. If your resolution is outside of these criteria, then the rectangle will not change color.
This is pretty neat, because this allows us to have different UI elements, depending if the device is wide enough or not. Take for example the Selector-Tabs again. These are way too wide to be displayed on most mobile phones. I have two media queries, which look a bit like this:
@media only screen and (min-width: 681px) {
.desktop{
display: block;
}
.mobile{
display: none;
}
}
@media only screen and (max-width: 680px) {
.desktop{
display: none;
}
.mobile{
display: block;
}
}
Basically, what this does is, as long as your device width is larger than 680 pixels, every tag with the class desktop will be displayed and every tag with the class mobile will be hidden. If your screen is smaller than that, mobile will be displayed and desktop will be hidden. When you take a look at the source code of my website, you will notice that the selector tabs are implemented twice, once as the tabs, and once as a dropdown menu. One has the desktop class, and the other the mobile class, so depending on how wide your screen is, a different selector will be displayed. Pretty neat.
<div class="selector" id="selector">
<ul class="selector_tabs desktop" id="selector_tabs">
<li class="selector_tab active_tab" id="selector_tab">
<a href="https://www.rismosch.com/">
<div><b>Home</b></div>
</a>
</li>
<li class="selector_tab " id="selector_tab">
<a href="https://www.rismosch.com/blog">
<div><b>Blog</b></div>
</a>
</li>
<li class="selector_tab " id="selector_tab">
<a href="https://www.rismosch.com/projects">
<div><b>Projects</b></div>
</a>
</li>
<li class="selector_tab " id="selector_tab">
<a href="https://www.rismosch.com/about">
<div><b>About</b></div>
</a>
</li>
</ul>
<div class="mobile">
<div onclick="showDropdown('dropdownSelector')" class="dropdownButton dropdownSelector selector_menu pixel_image" id="dropdownButton"></div>
<div class="dropdownContent dropdownSelector dropdown">
<a class="dropdown_selected" href="https://www.rismosch.com/">Home</a>
<a href="https://www.rismosch.com/blog">Blog</a>
<a href="https://www.rismosch.com/projects">Projects</a>
<a href="https://www.rismosch.com/about">About</a>
</div>
</div>
</div>
Now since I touched on meta tags with the most important HTML meta tag, it’s probably also a good idea to also talk about the other header tags. Here’s the header tags of the website you are viewing right now:
<meta charset="utf-8"/>
This tag defines the encoding of the text on your site. UTF-8 basically means Unicode, and for most purposes this will be good enough.
(Jan 09th, 2022) EDIT: This is incorrect. For a detailed explanation check out this this blogpost by Joel Spolsky. Read it. Now. No excuses.
<meta name="viewport" content="width=device-width,initial-scale=1" />
This is the already mentioned most important HTML header tag.
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon.png" sizes="32x32">
<link rel="shortcut icon" href="favicon.ico">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="msapplication-TileColor" content="#00aba9">
These basically define the small icon on the tab at the very top of your browser. Each browser follows different standards, so I implemented them multiple times to confine to all of them. I do not have every single browser in existence, but from what I have found, this should cover all mainstream browsers, like Firefox, Chrome, Edge, Safari and so on.
<link rel="stylesheet" href="css/desktop.css">
<link rel="stylesheet" href="css/main.css">
These are basically the CSS files, that define the style of my website. They need to be included, so that they can be used by your browser.
<script src="3rd_party_libraries/disqusloader.js"></script>
<script src="javascript/util.js"></script>
These are javascript files, which are used on this site. Like CSS, JavaScript can be outsourced to another file and be imported like this.
<title>CSS on Mobile, and The Most Important Header Tag</title>
This is the title, which is displayed on your browser tab.
<meta name="robots" content="all">
This tag is very important for search engines. It basically tells search engines what to do with your page, when they find it. all means, the search engine will display it without a problem in their search result. Setting it to noindex will prevent them from displaying that site. This is most helpful for redirect pages. When someone subscribes/unsubscribes to my newsletter, there are sites to handle that. With noindex, they won’t be displayed in the search results. That is good, because a normal user probably isn’t searching for these sites and most likely doesn’t care. Thus, displaying them does probably more harm than good.
<meta property="og:title" content="Mobile, and The Most Important Header Tag" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.rismosch.com/article?id=16" />
<meta property="og:image" content="https://www.rismosch.com/articles/16/thumbnail.jpg" />
These are data used by external sites and programs. For example, if you post a link in any social media, usually a title, thumbnail and whatever will also be displayed. These things can be set with these tags.
<meta name="author" content="Simon Sutoris">
And at last, you probably want to tell the world who actually wrote the source code of your website 😉
And that’s it. This is pretty much everything you need to know to display something in your browser. HTML, CSS and JavaScript will cover most of what you need in a website. Sure, I elided a lot of details, but that’s why search engines exist. Good resources on these things are w3schools and the Mozilla Development Network.
https://www.w3schools.com/
https://developer.mozilla.org/de/
Read the next chapters only if you dare…
|
| ◀ | Previous Post: How I Build My Website |
| ▶ | More Programming related Posts |
