{"id":46824,"date":"2019-10-18T03:01:02","date_gmt":"2019-10-17T17:01:02","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=46824"},"modified":"2019-10-18T07:51:00","modified_gmt":"2019-10-17T21:51:00","slug":"responsive-design-viewport-initial-scale-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/responsive-design-viewport-initial-scale-tutorial\/","title":{"rendered":"Responsive Design Viewport Initial Scale Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/index.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Responsive Design Viewport Initial Scale Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/responsive_design_viewport_initial_scale.jpg\" title=\"Responsive Design Viewport Initial Scale Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Responsive Design Viewport Initial Scale Tutorial<\/p><\/div>\n<p>The recent <a title='Responsive Design Viewport Width Considerations Tutorial' href='#rdvwct'>Responsive Design Viewport Width Considerations Tutorial<\/a> was a Responsive Design improvement step for our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/index.htm\" title=\"Click picture\">Landing Page<\/a> series of HTML\/Javascript\/CSS webpages at RJM Programming, but what it addressed was &#8220;what not to do&#8221;.<\/p>\n<p>Today, it is more the case, with mobile devices less than 700px wide, viewport wise, what is a &#8220;good step to do&#8221;?<\/p>\n<p>In really simple terms it is getting the head around &#8230;<\/p>\n<ul>\n<li>treating the meta tag <a target=_blank href='https:\/\/www.w3schools.com\/css\/css_rwd_viewport.asp' title='Responsive Web Design - The Viewport'>viewport<\/a> (within the head tag of a webpage) like a lot of other HTML tags within the body tag, do not hold off from giving it an ID attribute (actually restoring, somewhat) how we used to do it) &#8230; <b>so we did<\/b> &#8230;<br \/>\n<code><br \/>\n&lt;meta<b> id=\u201dmyviewport\u201d<\/b> name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<br \/>\n<\/code><br \/>\n &#8230; and then &#8230;\n<\/li>\n<li>add into that Javascript function widthfix the <b>new code<\/b> &#8230;<br \/>\n<code><br \/>\nfunction widthfix() {  \/\/<br \/>\n <b>if (navigator.userAgent.match(\/Android|BlackBerry|iPad|iPhone|iPod|Opera Mini|IEMobile\/i)) { \/\/ it is a mobile device<br \/>\n   if (screen.width &lt; 700) {<br \/>\n    var mvp = document.getElementById('myviewport');<br \/>\n    mvp.setAttribute('content','width=device-width, initial-scale=' + eval(screen.width \/ 768));<br \/>\n   }<br \/>\n }<\/b><br \/>\n \/\/ Below is as per the previous posting<br \/>\n if (1 == 7 && navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile\/i)) { \/\/ it is a mobile device<br \/>\n   document.getElementById('body_content').style.width='100%';<br \/>\n   document.getElementById('nav_layer').style.width='100%';<br \/>\n   document.getElementById('widget0').style.width='100%';<br \/>\n }<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; adjusting that &#8220;Initial Scale&#8221; setting of the viewport for those smaller devices, off the webpage document onload event\n<\/li>\n<\/ul>\n<p>If you are on such a mobile device, perhaps you see this improvement when accessing <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/index.htm\" title=\"Click picture\">the RJM Programming Landing Page<\/a>.<\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/responsive-design-viewport-initial-scale-tutorial\/'>Responsive Design Viewport Initial Scale Tutorial<\/a>.<\/p>\n<hr>\n<p id='rdvwct'>Previous relevant <a target=_blank title='Responsive Design Viewport Width Considerations Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/responsive-design-viewport-width-considerations-tutorial\/'>Responsive Design Viewport Width Considerations Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/index.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Responsive Design Viewport Width Considerations Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/responsive_design_viewport_width.jpg\" title=\"Responsive Design Viewport Width Considerations Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Responsive Design Viewport Width Considerations Tutorial<\/p><\/div>\n<p>Regarding our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/index.htm\" title=\"Click picture\">Landing Page<\/a> series of HTML\/Javascript\/CSS webpages here at RJM Programming, we&#8217;re streamlining our device width (<a target=_blank title='Responsive Web Design' href='https:\/\/www.w3schools.com\/css\/css_rwd_viewport.asp'>Responsive Web Design<\/a>) considerations of &#8230;<\/p>\n<ul>\n<li><a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-friendly-meta-viewport-tag-zoom-tutorial\/'>Mobile Friendly Meta Viewport Tag Zoom Tutorial<\/a> by now going with &#8230;<br \/>\n<table>\n<tr>\n<th>Was ..<\/th>\n<th><b>Now is<\/b> &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\n&lt;meta id=\u201dmyviewport\u201d name=\u201dviewport\u201d content=\u201dwidth=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes\u201d \/&gt;<br \/>\n<\/code>\n<\/td>\n<td>\n<code><br \/>\n<b>&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<\/b><br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<li><a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-pagespeed-and-firebug-mobile-friendly-primer-tutorial\/' title='Google PageSpeed and Firebug Mobile Friendly Primer Tutorial'>Google PageSpeed and Firebug Mobile Friendly Primer Tutorial<\/a> by now going with &#8230;<br \/>\n<table>\n<tr>\n<th>Was ..<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\nfunction widthfix() {  \/\/<br \/>\n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile\/i)) { \/\/ it is a mobile device<br \/>\n   document.getElementById('body_content').style.width='100%';<br \/>\n   document.getElementById('nav_layer').style.width='100%';<br \/>\n   document.getElementById('widget0').style.width='100%';<br \/>\n }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th><b>Now is<\/b> &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\nfunction widthfix() {  \/\/<br \/>\n if (<b>1 == 7 && <\/b>navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile\/i)) { \/\/ it is a mobile device<br \/>\n   document.getElementById('body_content').style.width='100%';<br \/>\n   document.getElementById('nav_layer').style.width='100%';<br \/>\n   document.getElementById('widget0').style.width='100%';<br \/>\n }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<\/ul>\n<p>Why?<\/p>\n<ul>\n<li>viewport advice of W3School&#8217;s <a target=_blank href='https:\/\/www.w3schools.com\/css\/css_rwd_viewport.asp' title='Responsive Web Design - The Viewport'>Responsive Web Design &#8211; The Viewport<\/a> useful link, thanks &#8230; to keep it simple &#8230;<br \/>\n<code><br \/>\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<br \/>\n<\/code>\n<\/li>\n<li>we were able to use Safari (web browser) Develop Menu &#8220;Responsive Design Mode&#8221; functionality (as per <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/safari-develop-menu-responsive-design-primer-tutorial\/' title='Safari Develop Menu Responsive Design Primer Tutorial'>Safari Develop Menu Responsive Design Primer Tutorial<\/a>) to see for ourselves the improvement where our previous width based Javascript logic amendments had been interfering with the meta viewport suggestions better in keeping with Responsive Design thoughts<\/li>\n<\/ul>\n<p>Food for thought, we hope, for those chipping away at responsive design amalgamations!<\/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='#d46756' onclick='var dv=document.getElementById(\"d46756\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46756' 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='#d46824' onclick='var dv=document.getElementById(\"d46824\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onload\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46824' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The recent Responsive Design Viewport Width Considerations Tutorial was a Responsive Design improvement step for our Landing Page series of HTML\/Javascript\/CSS webpages at RJM Programming, but what it addressed was &#8220;what not to do&#8221;. Today, it is more the case, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/responsive-design-viewport-initial-scale-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":[281,576,3114,652,680,776,870,997,1991,1319,1373,1418,2257],"class_list":["post-46824","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-css","tag-html","tag-initial_scale","tag-javascript","tag-landing-page","tag-meta","tag-onload","tag-programming","tag-responsive-design","tag-tutorial","tag-viewport","tag-webpage","tag-width"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46824"}],"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=46824"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46824\/revisions"}],"predecessor-version":[{"id":46847,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46824\/revisions\/46847"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=46824"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=46824"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=46824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}