Hari's Corner

Humour, comics, tech, law, software, reviews, essays, articles and HOWTOs intermingled with random philosophy now and then

This site is now mobile-friendly

Filed under: Site management by Hari
Posted on Tue, Aug 29, 2017 at 22:49 IST (last updated: Tue, Aug 29, 2017 @ 23:02 IST)

I've now made this website basically mobile-friendly, in the sense that it is now easy to browse using a mobile browser. I achieved this mostly by setting the viewport scaling to 1 and using CSS media queries to adjust the CSS wherever required for mobile friendly access. Though not perfect, this website is at least easily readable on a mobile browser now. For those curious as to how it can be achieved, you can view the CSS of this page and also the meta tag for viewport setting i.e.

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

This line in the head of every page will ensure that the page does not "scale" as though it was a desktop width page to fit into a mobile browser. Further CSS media queries which are supported by most modern browsers allow you to easily change the CSS to suit smaller sized screens. A powerful combination which makes it simple to maintain a single website to serve on both desktops and mobiles.

2 comment(s)

Leave a comment »
  1. Yes, Hari, it's been a while.

    I use:

    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">

    Of course, I'm using HTML5. I created my own them and did the CSS myself. You should take a look sometime.

    Comment by RT Cunningham (visitor) on Wed, Feb 28, 2018 @ 16:55 IST #
  2. Hi, RT. Thanks for dropping by. It's been a while for me too and I haven't really been online all that much (except if you count some updates on FaceBook and Flickr). Blogging has really become rare for me these days. :-)

    Comment by Hari (blog owner) on Fri, Mar 2, 2018 @ 20:45 IST #

Leave a comment

First-time comments on this blog are moderated.
Your name*
Email ID*
(wont' be published)
Your comments*
(No HTML allowed)
:-) :-D :biggrin: :-P ;-) 8-) :-( :mad: |-| :oops: :-/ :-| :roll:
bold italic quote code
Code* captcha Enter the code you see in the image
* required fields