I have a fun website that displays a couple of business cards, the intent being that, when I meet someone I don’t know and they ask me for something like my work phone number or my email address, I can just say “My name is Julian, so go to IMetJulian.com, it’s all there.”
I’ve had it now for some dozen years, copied from another IMetXxxxxx site that no longer exists, but I’ve never been really happy with the way it looks on a phone, it’s all too small and scrunched up. And the text breaks differently than on the desktop. Meh.
Scrunched up page
So, a few weeks ago, I took a look at it, off and on, trying to make sense of why it wasn’t displaying well on a smaller mobile device, but looked good on a desktop browser. Of course, given that on the web the way a page is displayed is all about the CSS, that was where I spent my time. Plus, of course, also using the developer tools in Firefox.
But, no matter what I did – and believe you me I was messing around with margins and their auto value and taking it all out and adding it back in and-and-and – nothing would make it change. I was even deep into adding CSS @media definitions. But, as I said, nothing worked. If the CSS wouldn’t make a page display well on mobile, what else could I change?
And suddenly I vaguely remembered something from days gone by. A quick bit of research later, I had it. It’s the viewport meta tag, which is declared in – wait for it – the HTML! Nothing to do with CSS.
Basically the viewport is the part of the browser window which shows the web page. If there’s more to the page that can be displayed in the viewport, then scrollbars get added, etc, to help the user navigate through the page. For mobile devices, because they are narrower than the desktop, the browser goes into some shenanigans: it pretends that the viewport is wider than the screen (say, 980 pixels), renders the content in that virtual space, and then shrinks the result down to display on the physical screen. The big reason for going through all this is that many sites are just not designed for mobile devices (oh, hello, IMetJulian.com!), and so the browser tries to do its best to make things look semi-decent on the mobile screen.
But of course, if you are designing your web page to look good on a mobile device, you don’t want all this automatic stuff, you want to take control. Here’s the viewport meta tag that goes into the <head> element of the HTML that I added to sort all this out.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">After that I cleaned all the code up a bit and added an SVG for the DevExpress logo. If you really want to see the broken site on your mobile device, go to IMetJulian.com/broken/default.html.
Loading links to posts on similar topics...
No Responses
Feel free to add a comment...
Leave a response
Note: some MarkDown is allowed, but HTML is not. Expand to show what's available.
_emphasis_**strong**[text](url)`IEnumerable`* an item1. an item> Now is the time...Preview of response