{"id":1425,"date":"2010-08-09T20:23:32","date_gmt":"2010-08-09T20:23:32","guid":{"rendered":"http:\/\/dalelane.co.uk\/blog\/?p=1425"},"modified":"2010-08-10T14:25:11","modified_gmt":"2010-08-10T14:25:11","slug":"adjusting-mobile-web-font-sizes-to-fit-screen-resolutions","status":"publish","type":"post","link":"https:\/\/dalelane.co.uk\/blog\/?p=1425","title":{"rendered":"Adjusting mobile web font-sizes to fit screen resolutions"},"content":{"rendered":"<p>This might be obvious to someone less ignorant in the mystic ways of CSS, but I thought it was worth sharing anyway. \ud83d\ude42<\/p>\n<p>I was <a href=\"http:\/\/twitter.com\/dalelane\/statuses\/20731779529\" target=\"_blank\">struggling to<\/a> <a href=\"http:\/\/twitter.com\/dalelane\/status\/20731597746\" target=\"_blank\">work<\/a> <a href=\"http:\/\/twitter.com\/dalelane\/status\/20731930653\" target=\"_blank\">out<\/a> a suitable font-size for a mobile web page. Whether I tried using size names like &#8220;x-large&#8221;, or values with em, pt, px or %, the same basic problem remained: <\/p>\n<p><a href=\"http:\/\/www.flickr.com\/photos\/dalelane\/4876929280\/\" title=\"CSS - not working by dalelane, on Flickr\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/farm5.static.flickr.com\/4101\/4876929280_f152458f0f.jpg\" width=\"450\" height=\"443\" alt=\"CSS - not working\" \/><\/a><\/p>\n<p>Font-sizes were either too small on smartphones with high-resolution screens, or too large on other smartphones. <\/p>\n<p>If I increased the font-size to look better on a high-res screen, it was too big for other phones. If I decreased the font-size for those other phones, it looked tiny on a high-res screen. <\/p>\n<p><!--more-->I know that I could go the whole hog and use something like <a href=\"http:\/\/deviceatlas.com\/\" target=\"_blank\">DeviceAtlas<\/a> to generate a CSS file customised for the dimensions of the screen, but that is overkill for this quick, simple page I need to create. <\/p>\n<p>I finally found the answer. Put this in the &lt;head&gt; :<\/p>\n<pre style=\"border: thin solid silver; background-color: #eeeeee; padding: 0.7em; font-size: 1.1em; overflow: auto;\">&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\" \/&gt;<\/pre>\n<p>With this, the page now looks like this:<\/p>\n<p><a href=\"http:\/\/www.flickr.com\/photos\/dalelane\/4876318257\/\" title=\"CSS - working by dalelane, on Flickr\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/farm5.static.flickr.com\/4080\/4876318257_d899bc49e4.jpg\" width=\"450\" height=\"441\" alt=\"CSS - working\" \/><\/a><\/p>\n<p>It scales properly. <\/p>\n<p>Hurrah. \ud83d\ude42<\/p>\n<p><strong>Update (10-Aug):<\/strong> And it seems to <a href=\"http:\/\/twitter.com\/neilco\/status\/20790681163\" target=\"_blank\">work this way on the iPhone browser<\/a> as well. (Thanks to <a href=\"http:\/\/neilcowburn.com\/\" target=\"_blank\">Neil<\/a> for checking!)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This might be obvious to someone less ignorant in the mystic ways of CSS, but I thought it was worth sharing anyway. \ud83d\ude42 I was struggling to work out a suitable font-size for a mobile web page. Whether I tried using size names like &#8220;x-large&#8221;, or values with em, pt, px or %, the same [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[462,461,46],"class_list":["post-1425","post","type-post","status-publish","format-standard","hentry","category-code","tag-css","tag-html","tag-mobile"],"_links":{"self":[{"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1425","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1425"}],"version-history":[{"count":0,"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1425\/revisions"}],"wp:attachment":[{"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1425"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1425"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}