{"id":46778,"date":"2019-10-13T03:01:02","date_gmt":"2019-10-12T17:01:02","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=46778"},"modified":"2019-10-12T12:36:53","modified_gmt":"2019-10-12T02:36:53","slug":"viewport-and-css-calc-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/viewport-and-css-calc-primer-tutorial\/","title":{"rendered":"Viewport and CSS Calc Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/viewport_poc.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Viewport and CSS Calc Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.jpg\" title=\"Viewport and CSS Calc Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Viewport and CSS Calc Primer Tutorial<\/p><\/div>\n<p>Keeping on with some themes of yesterday&#8217;s <a title='Responsive Design Viewport Width Considerations Tutorial' href='#rdvwct'>Responsive Design Viewport Width Considerations Tutorial<\/a>, today, we combine ideas around &#8230;<\/p>\n<ul>\n<li>(meta) <a target=_blank title='Responsive Web Design' href='https:\/\/www.w3schools.com\/css\/css_rwd_viewport.asp'>viewport<\/a> &#8230; and &#8230;<\/li>\n<li>(CSS) <a target=_blank title='CSS3 calc information' href='https:\/\/www.htmlgoodies.com\/html5\/css\/using-the-css3-calc-function.html'>calc<\/a><\/li>\n<\/ul>\n<p> &#8230; in a &#8220;proof of concept&#8221; web application we are using to explore ideas from the ground up <font size=1> &#8230; hello, wormies!<\/font><\/p>\n<p>This is <b>p<\/b>recise <b>p<\/b>ixel <b>p<\/b>lacement 101, bringing us to a division of concept with webpage design &#8230;<\/p>\n<table style=width:100%>\n<tr>\n<th><\/th>\n<th>Screen<\/th>\n<th>Viewport<\/th>\n<\/tr>\n<tr>\n<td>Width and Height Unitary Units<\/td>\n<td>px<\/td>\n<td>px<\/td>\n<\/tr>\n<tr>\n<td>Width Proportionate Units<\/td>\n<td>%<\/td>\n<td>vx<\/td>\n<\/tr>\n<tr>\n<td>Height Proportionate Units<\/td>\n<td>%<\/td>\n<td>vh<\/td>\n<\/tr>\n<tr>\n<td>Width (or Left) Calc-friendly<\/td>\n<td>%,px<\/td>\n<td>%,px,100vx<\/td>\n<\/tr>\n<tr>\n<td>Height (or Top) Calc-friendly<\/td>\n<td>%,px<\/td>\n<td>%,px,vh,100vh<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; where our &#8220;proof of concept&#8221; findings (on Safari, Firefox, Chrome, Opera and Safari simulations of Edge and Internet Explorer) so far make us believe the Viewport <i>width: calc(100vx &#8211; 60px);<\/i> CSS definition type of syntax that sounds great on paper does not appear to work in practice.<\/p>\n<p>So take a look at our very symmetric <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/viewport_poc.html_GETME\" title=\"viewport_poc.html\">viewport_poc.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/viewport_poc.html\" title=\"Click picture\">live run<\/a> link &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/viewport_poc.html\" style=\"width:100%;height:800px;\"><\/iframe><\/p>\n<p> &#8230; or HTML iframe supervision to see what we are getting at here.<\/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='#d46778' onclick='var dv=document.getElementById(\"d46778\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/pixel\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46778' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Keeping on with some themes of yesterday&#8217;s Responsive Design Viewport Width Considerations Tutorial, today, we combine ideas around &#8230; (meta) viewport &#8230; and &#8230; (CSS) calc &#8230; in a &#8220;proof of concept&#8221; web application we are using to explore ideas &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/viewport-and-css-calc-primer-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":[2422,281,2507,2258,576,776,2255,1918,997,1986,1319,1373,3110],"class_list":["post-46778","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-calc","tag-css","tag-dimension","tag-height","tag-html","tag-meta","tag-percentage","tag-pixel","tag-programming","tag-proof-of-concept","tag-tutorial","tag-viewport","tag-with"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46778"}],"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=46778"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46778\/revisions"}],"predecessor-version":[{"id":46785,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46778\/revisions\/46785"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=46778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=46778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=46778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}