{"id":20730,"date":"2016-03-17T03:01:30","date_gmt":"2016-03-16T17:01:30","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=20730"},"modified":"2019-10-11T11:36:49","modified_gmt":"2019-10-11T01:36:49","slug":"mobile-friendly-meta-viewport-tag-zoom-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-friendly-meta-viewport-tag-zoom-tutorial\/","title":{"rendered":"Mobile Friendly Meta Viewport Tag Zoom Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_zoom.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Mobile Friendly Meta Viewport Tag Zoom Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_zoom.jpg\" title=\"Mobile Friendly Meta Viewport Tag Zoom Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Mobile Friendly Meta Viewport Tag Zoom Tutorial<\/p><\/div>\n<p>Yesterday, with <a title='Mobile Friendly Meta Viewport Tag Primer Tutorial' href='#mfmvtp'>Mobile Friendly Meta Viewport Tag Primer Tutorial<\/a> as shown below, we featured the HTML meta tag &#8230;<\/p>\n<p>&lt;meta id=&#8221;myviewport&#8221; name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes&#8221; \/&gt;<\/p>\n<p> &#8230; and explained more of its uses, taking a look at its <i>content<\/i> definition as per &#8230;<\/p>\n<ul>\n<li><b>width<\/b> &#8230; most often useful to put <i>device-width<\/i> here, but doesn&#8217;t have to be<\/li>\n<li><b>initial-scale<\/b> &#8230; most often useful to put <i>1<\/i> here<\/li>\n<li><b>minimum-scale<\/b> &#8230; minimum zoom setting<\/li>\n<li><b>maximum-scale<\/b> &#8230; maximum zoom setting<\/li>\n<li><b>user-scalable<\/b> &#8230; most often useful to put <i>yes<\/i> here, but you may want to control everything and put <i>no<\/i><\/li>\n<\/ul>\n<p>Today, if you are on a mobile device, we want to show that the HTML meta viewport tag can be used to zoom in and\/or out on your web application run on a web browser of your mobile device.<\/p>\n<p>We start our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_zoom.html\" title='Click picture'>live run<\/a> (with the HTML and Javascript code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_zoom.html_GETME\">viewport_zoom.html<\/a>) by starting our &#8220;Eat at Joe&#8217;s&#8221; animated GIF content with &#8230;<\/p>\n<ul>\n<li><b>width<\/b>=<i>device-width<\/i><\/li>\n<li><b>initial-scale<\/b>=<i>1<\/i><\/li>\n<li><b>user-scalable<\/b>=<i>yes<\/i> (though most of the point here is for you to sit back and watch what the web application does to zoom around your webpage of your web application run on a web browser of your mobile device)<\/li>\n<\/ul>\n<p> &#8230; and change the <b>initial-scale<\/b> dynamically with Javascript DOM to head towards &#8230;<\/p>\n<ul>\n<li><b>minimum-scale<\/b><\/li>\n<\/ul>\n<p> &#8230; before heading out to &#8230;<\/p>\n<ul>\n<li><b>maximum-scale<\/b><\/li>\n<\/ul>\n<p> &#8230; and then back to <strike>infinity and beyond<\/strike> <b>minimum-scale<\/b> etcetera etcetera etcetera.<\/p>\n<p>We hope you enjoy our spacy feeling web application today.  You can control the initial settings via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_zoom.html?ask=y\" title='Control viewport live run'>viewport prompting live run<\/a>.<\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>The ideas above got a tweak in October, 2019 which you can read about on <a target=_blank title='Responsive Design Viewport Width Considerations Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/responsive-design-viewport-width-considerations-tutorial\/'>Responsive Design Viewport Width Considerations Tutorial<\/a> from 12th October, 2019.<\/p>\n<hr>\n<p id='mfmvtpt'>Previous relevant <a target=_blank title='Mobile Friendly Meta Viewport Tag Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-friendly-meta-viewport-tag-primer-tutorial\/'>Mobile Friendly Meta Viewport Tag Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Mobile Friendly Meta Viewport Tag Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.jpeg\" title=\"Mobile Friendly Meta Viewport Tag Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Mobile Friendly Meta Viewport Tag Primer Tutorial<\/p><\/div>\n<p>A couple of days ago we cautioned against thinking the HTML meta tag was a &#8220;cure all&#8221; to make a web application mobile friendly.  Well, lately we&#8217;ve had a web application where it made ALL the difference, and so, today, we want to take that opportunity to explain why this tag can help out with web application mobile friendliness, but please don&#8217;t think we resile from that original &#8220;cure all&#8221; warning, because mobile friendly solutions usually do involve more than the inclusion of one of these, albeit, wonderful (and a programmer&#8217;s &#8220;phew&#8221; tool) HTML head elements, the HTML <a target=_blank title='HTML meta tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_meta.asp'>meta<\/a> <a target=_blank title='Viewport information from w3schools' href='http:\/\/www.w3schools.com\/css\/css_rwd_viewport.asp'>viewport<\/a> tag.<\/p>\n<p>First take a look at our <a title='Intelligent Hashtagging Primer Tutorial' href='#ihpt'>Intelligent Hashtagging Primer Tutorial<\/a> below and reference that to our BEFORE and AFTER scenario of it illustrated in today&#8217;s tutorial picture picture (of an iPad).  Without the HTML meta tag the browser has no guidance regarding scale and will choose its own determinations about this, and with our huge width of data with our intelligent hash tagging web application, it will do something that was not wanted, to also live with the window.innerWidth usage web application Javascript internal &#8220;intelligence&#8221; about knowing which page you are on without you ever going back through an HTML body onload event.  Feel at this stage that we should explain &#8230; we don&#8217;t let loose with the use of this &#8220;intelligence&#8221; but if you examine the HTML closely you&#8217;ll see all the HTML element IDs are based on the page number &#8230; so you could add lots more &#8220;intelligence&#8221; &#8230; will leave that for you &#8230; am feeling a dumb spell coming on!<\/p>\n<p>Okay, let&#8217;s break down parts of that HTML meta tag &#8230;<\/p>\n<p>&lt;meta id=&#8221;myviewport&#8221; name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes&#8221; \/&gt;<\/p>\n<p> &#8230; to explain more of its uses &#8230;<\/p>\n<ul>\n<li><b>width<\/b> &#8230; most often useful to put <i>device-width<\/i> here, but doesn&#8217;t have to be<\/li>\n<li><b>initial-scale<\/b> &#8230; most often useful to put <i>1<\/i> here, and this is what stops the left hand side of today&#8217;s tutorial picture happening<\/li>\n<li><b>minimum-scale<\/b> &#8230; minimum zoom setting<\/li>\n<li><b>maximum-scale<\/b> &#8230; maximum zoom setting<\/li>\n<li><b>user-scalable<\/b> &#8230; most often useful to put <i>yes<\/i> here, but you may want to control everything and put <i>no<\/i><\/li>\n<\/ul>\n<p>Today, if you are on a mobile device, we want to show that the HTML meta viewport tag can be changed dynamically via code like &#8230;<\/p>\n<p><code><br \/>\n   viewport = document.querySelector(\"meta[name=viewport]\"); \/\/ thanks to http:\/\/stackoverflow.com\/questions\/3588628\/can-i-change-the-viewport-meta-tag-in-mobile-safari-on-the-fly<br \/>\n   viewport.setAttribute('content', 'width=' + width + ', initial-scale=' + initial_scale + ', minimum-scale=' + minimimum_scale + ', maximum-scale=' + maximimum_scale + ', user-scalable=' + user_scalable);<br \/>\n<\/code><\/p>\n<p> &#8230; the idea for which we got from this <a target=_blank title='Very useful link' href='http:\/\/stackoverflow.com\/questions\/3588628\/can-i-change-the-viewport-meta-tag-in-mobile-safari-on-the-fly'>very useful link<\/a>.<\/p>\n<p>To try this out (on a mobile device, only, will you see any affect) you can try this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.html?ask=y\" title='Control viewport live run'>viewport prompting live run<\/a> (as distinct from the run of the mill <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.html\" title='Click picture'>live run<\/a>).  Here is the new HTML and Javascript source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.html-GETME\" tile='detect_hashtag_navigation.html'>detect_hashtag_navigation.html<\/a> changed for all these mobile friendly considerations as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.html-GETME\">these changes<\/a>, from a couple of days ago.<\/p>\n<p>Okay, we have another agenda today.  On a mobile device, you may or may not want to cater for the user rotating the device, and so changing its <a target=_blank title='Mobile device orientation information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Detecting_device_orientation'>&#8220;orientation&#8221;<\/a>.  The way you can go about knowing this has happened, and we feel compelled to tell our users with today&#8217;s web application, because the top.document.title Page Numbers may get out of kilter should they proceed (unawares).  We go about detecting by, in general terms &#8230;<\/p>\n<ol>\n<li>storing away global var<font size=1>iables<\/font> for <i>window.innerWidth<\/i> and <i>window.innerHeight<\/i> at the HTML body <i>onload<\/i> event<\/li>\n<li>in the Javascript function that regularly checks on our Page Number calculations, and puts the findings into top.document.title, we <b>check as per<\/b> &#8230;<br \/>\n<code><br \/>\nfunction firstCheck() {<br \/>\n  <b>var durl=document.URL.split('#');<br \/>\n  var isok='y';<\/b><br \/>\n  top.document.title=\"You are on Page \" + eval(Math.floor((eval(getScrollLeft()) + eval(pw)) \/ eval(pw)));<br \/>\n  <b><br \/>\n  if (eval(pw) &gt; eval(ph) && window.innerHeight &gt; window.innerWidth && !done) {<br \/>\n      done=true;<br \/>\n      isok=prompt(\"Change of orientation may make top.document.title (ie. Page Number) wrong.  Continue anyway, or change default answer to refresh for new orientation.\", isok);<br \/>\n  } else if (eval(pw) &lt; eval(ph) && window.innerHeight &lt; window.innerWidth && eval(window.innerWidth \/ eval(pw)) &lt; eval(numpages - 1) && !done) {<br \/>\n      done=true;<br \/>\n      isok=prompt(\"Change of orientation may make top.document.title (ie. Page Number) wrong.  Continue anyway, or change default answer to refresh for new orientation.\", isok);<br \/>\n  }<br \/>\n<\/b><b><br \/>\n  if (isok != null) {<br \/>\n      if (isok != 'y') {<br \/>\n       if (durl[0].indexOf('?') != -1) {<br \/>\n        location.href=durl[0] + '&huh=' + window.innerHeight + '#page' + eval(Math.floor((eval(getScrollLeft()) + eval(pw)) \/ eval(pw)));<br \/>\n       } else {<br \/>\n        location.href=durl[0] + '?huh=' + window.innerHeight + '#page' + eval(Math.floor((eval(getScrollLeft()) + eval(pw)) \/ eval(pw)));<br \/>\n       }<br \/>\n      }<br \/>\n  }<br \/>\n<\/b><br \/>\n  setTimeout(firstCheck,1000);<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p>So we have that tutorial picture BEFORE and AFTER image snapshot, but maybe you are on a mobile device and want to see that <span style='border:1px solid orange;'>AFTER<\/span> and BEFORE (yes, AFTER is on the left &#8230; can you guess why?) scenario yourself?  Well, cast your eyes below, and we hope you come back to read more blog posts soon &#8230; bye &#8230;<\/p>\n<table>\n<tr>\n<td style='width:50%;border:1px solid orange;'><iframe style='height:500px;width:300px;' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.html' title='AFTER'><\/iframe><\/td>\n<td style='width:50%;'><iframe style='height:500px;width:300px;' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.htm' title='BEFORE'><\/iframe><\/td>\n<\/tr>\n<\/table>\n<p> &#8230; and take a look up at your web browser&#8217;s title for this blog posting&#8217;s web page &#8230; see how top.document.title usage, rather than just document.title usage, has such power &#8230; see it change by navigating in either.  We last, sort of, raved about this top.document.title thought when we presented <a target=_blank title='Javascript Associative Array Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-associative-array-primer-tutorial\/'>Javascript Associative Array Primer Tutorial<\/a> &#8230; <font size=1>and now we&#8217;re almost over it<\/font>.<\/p>\n<hr>\n<p id='ihpt'>Previous relevant <a target=_blank title='Intelligent Hashtagging Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/intelligent-hashtagging-primer-tutorial\/'>Intelligent Hashtagging Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Intelligent Hashtagging Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.jpg\" title=\"Intelligent Hashtagging Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Intelligent Hashtagging Primer Tutorial<\/p><\/div>\n<p>The HTML hashtagging navigation technique off an HTML <i>a<\/i> tag like &#8230;<\/p>\n<p><code><br \/>\n&lt;a href='#page3' title='Go to page 3 via hashtagging'&gt;Go to page 3 via hashtagging navigation&lt;\/a&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; does not involve a rerun of the Javascript DOM document.body&#8217;s <i>onload<\/i> event, and that may dampen the spirit of some programmers, and they resort to Ajax techniques perhaps, to get more logic in by staying on the same webpage, but we are here to tell you that you should think of using <a target=_blank title='window.getComputedStyle information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/getComputedStyle'>window.getComputedStyle()<\/a> method techniques teamed with <a target=_blank title='window.innerWidth information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/innerWidth'>window.innerWidth<\/a> property and the <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> Javascript functionality &#8230; <\/p>\n<p><code><br \/>\nfunction firstCheck() {<br \/>\n  top.document.title=\"You are on Page \" + eval(Math.floor((eval(<b>getScrollLeft()<\/b>) + eval(pw)) \/ eval(pw)));<br \/>\n  setTimeout(firstCheck,1000);<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; to stay on your one webpage and be able to add intelligence as the user navigates, via hashtagging, to other parts of the webpage, effectively off to the left or right of the screen, controlled by our CSS &#8220;usual suspect&#8221; (for <a target=_blank title='Overlay tutorials' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>overlay<\/a> tutorials) <a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a>.<\/p>\n<p>We do it today, with our dynamic &#8220;Book of Proverbs&#8221; that has &#8230;<\/p>\n<ul>\n<li>Next Page HTML <i>a<\/i> link hashtagging navigation &#8230; plus a rudimentary &#8230;<\/li>\n<li>Breadcrumb hashtagging navigation to some other pages<\/li>\n<li>A proverb &#8230; aw shucks &#8230; thanks to <a target=_blank title='http:\/\/tww.id.au\/proverbs\/proverbs.html' href='http:\/\/tww.id.au\/proverbs\/proverbs.html'>http:\/\/tww.id.au\/proverbs\/proverbs.html<\/a><\/li>\n<li>A (homegrown) image from <a target=_blank title='Ephemeral' href='http:\/\/www.rjmprogramming.com.au\/ephemeral'>Ephemeral<\/a><\/li>\n<\/ul>\n<p>As you try the <a target=_blank title='detect_hashtag_navigation.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.html'>live run<\/a>, look up at top.document.title and it shows the Page number you are on &#8230; <font size=1>a small step for man, a giant leap for mankind<\/font> not &#8230; but we do use <a target=_blank title='window.getComputedStyle information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/getComputedStyle'>window.getComputedStyle()<\/a> to add intelligence (helped along by the great leads <a target=_blank title='Great lead' href='http:\/\/stackoverflow.com\/questions\/871399\/cross-browser-method-for-detecting-the-scrolltop-of-the-browser-window'><b>this link<\/b><\/a> provided &#8230; thanks), as you can tell with our HTML and Javascript source code you could call <a target=_blank title='detect_hashtag_navigation.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/detect_hashtag_navigation.html_GETME'>detect_hashtag_navigation.html<\/a><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d20672' onclick='var dv=document.getElementById(\"d20672\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hashtag\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20672' style='display: none; border-left: 2px solid green; border-top:2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d20701' onclick='var dv=document.getElementById(\"d20701\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/viewport\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20701' style='display: none; border-left: 2px solid green; border-top:2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d20730' onclick='var dv=document.getElementById(\"d20730\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mobile\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20730' style='display: none; border-left: 2px solid green; border-top:2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday, with Mobile Friendly Meta Viewport Tag Primer Tutorial as shown below, we featured the HTML meta tag &#8230; &lt;meta id=&#8221;myviewport&#8221; name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes&#8221; \/&gt; &#8230; and explained more of its uses, taking a look at its &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-friendly-meta-viewport-tag-zoom-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[69,281,354,557,576,630,652,777,795,798,830,997,1126,1200,1319,1373,1827,1826,1498],"class_list":["post-20730","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-ajax","tag-css","tag-dom","tag-hashtag","tag-html","tag-ipad","tag-javascript","tag-meta-tag","tag-mobile","tag-mobile-friendly","tag-navigation","tag-programming","tag-settimeout","tag-stop-press","tag-tutorial","tag-viewport","tag-window-getcomputedstyle","tag-window-innerwidth","tag-zoom"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20730"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=20730"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20730\/revisions"}],"predecessor-version":[{"id":46758,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20730\/revisions\/46758"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=20730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=20730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=20730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}