{"id":3419,"date":"2014-03-29T19:00:02","date_gmt":"2014-03-30T00:00:02","guid":{"rendered":"http:\/\/www.lonhosford.com\/lonblog\/?p=3419"},"modified":"2015-07-31T18:25:48","modified_gmt":"2015-07-31T23:25:48","slug":"mobile-first-responsive-design-setting-the-viewport","status":"publish","type":"post","link":"https:\/\/www.lonhosford.com\/lonblog\/2014\/03\/29\/mobile-first-responsive-design-setting-the-viewport\/","title":{"rendered":"Mobile First Responsive Design  with Media Queries Setting the Viewport"},"content":{"rendered":"<div id=\"fb-root\"><\/div>\n<p><script src=\"https:\/\/connect.facebook.net\/en_US\/all.js#appId=105467682877384&amp;xfbml=1\"><\/script><fb:like href=\"https:\/\/www.lonhosford.com\/lonblog\/2014\/03\/29\/mobile-first-responsive-design-setting-the-viewport\/\" send=\"true\" width=\"450\" show_faces=\"true\" font=\"\"><\/fb:like><!-- Place this tag where you want the +1 button to render --><g:plusone annotation=\"inline\"><\/g:plusone><br \/>\n<strong><a href=\"https:\/\/www.lonhosford.com\/lonblog\/2014\/03\/29\/css-media-queries-mobile-first-responsive-design-views\/\">Previous<\/a> | Part 2 of 5 | <a href=\"https:\/\/www.lonhosford.com\/lonblog\/2014\/03\/30\/mobile-first-responsive-design-css-media-selector\/\">Next<\/a><\/strong> <\/p>\n<p>By Lon Hosford<br \/>\nMobile web browsers may scale down your web page. That can result in an unattractive and<br \/>\nunreadable content. They may show a partial width of your page. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.lonhosford.com\/lonblog\/wp-content\/uploads\/2014\/03\/03_setting_the_view_port_900x544-300x181.png\" alt=\"Blog image for CSS Media Query 101 Mobile First Tutorial Viewports and Scaling\" width=\"300\" height=\"181\" class=\"alignleft size-medium wp-image-3425\" srcset=\"https:\/\/www.lonhosford.com\/lonblog\/wp-content\/uploads\/2014\/03\/03_setting_the_view_port_900x544-300x181.png 300w, https:\/\/www.lonhosford.com\/lonblog\/wp-content\/uploads\/2014\/03\/03_setting_the_view_port_900x544.png 900w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>This makes the user resize and horizontally scroll your page. Or worse they might just hit the back button. You may find that these default behaviors of mobile web browsers render the work that you put into designing your page ineffective. So let&#8217;s look at this problem and the simple HTML tag to correct it.<\/p>\n<p><strong>The Viewport<\/strong><br \/>\nThe viewport represents the boundaries of the part of the content you can see. <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.lonhosford.com\/lonblog\/wp-content\/uploads\/2014\/03\/iphone_noaa_weather_zoomed-200x300.png\" alt=\"NOAA Weather Page IPhone\" align = \"right\" style = \"padding: 5px 10px 5px 5px;\" width=\"200\" height=\"300\" class=\"size-thumbnail wp-image-3425\" \/>The content you cannot see you might say is &#8220;off screen&#8221;. It is actually masked by the boundaries of the viewport as on the right screen shot of the NOAA website.<\/p>\n<p>The web browser window in a typical laptop and desktop is the viewport of your web pages. Of course laptops and desktop screens also present themselves as a viewport for running windows. <\/p>\n<p>For most mobile devices the web browser does not have a window in the same respect does a web browser on a laptop or desktop. Often the web browser viewport is the actual width and height of the device. So unlike a desktop where you can position the web browser partially off screen, you cannot do that with a mobile web browser.<\/p>\n<p>Mobile web browsers will make some assumptions about your web page if it does not already fit within the dimensions of the device viewport. This could be how much it scales and what percentage of the width it wants in the viewport width. <\/p>\n<p>You can visit the web browser web sites to find out exactly how that works. But why bother unless you do not plan to design or redesign your web page to fit within the viewport. For a field trip you can visit the <a href=\"https:\/\/developer.apple.com\/library\/ios\/DOCUMENTATION\/AppleApplications\/Reference\/SafariWebContent\/UsingtheViewport\/UsingtheViewport.html\" title=\"Safari Viewport Configuration Web Page\" target=\"_blank\">Safari Viewport Configuration Web Page<\/a>.<\/p>\n<p style=\"text-align:center\">\n<a target='new' href=\"http:\/\/click.linksynergy.com\/link?id=A1q8CHNXgAc&#038;offerid=323057.186466&#038;type=2&#038;murl=https%3A%2F%2Fwww.udemy.com%2Fadobe-photoshop-cc-for-photographers%2F\"><IMG border=0 src=\"https:\/\/udemyimages-a.akamaihd.net\/course\/480x270\/186466_597e_2.jpg\" ><\/a><IMG border=0 width=1 height=1 src=\"https:\/\/ad.linksynergy.com\/fs-bin\/show?id=A1q8CHNXgAc&#038;bids=323057.186466&#038;type=2&#038;subid=0\" >\n<\/p>\n<p><strong>The HTML meta Tag for Viewport<\/strong><\/p>\n<p>The HTML <code>meta<\/code> tag is used to override the mobile web browser&#8217;s default calculations for dimensions and scaling. The <code>name<\/code> attribute is set to <code>viewport<\/code>. The content attribute contains a number properties expressed as name value pair options separated by commas. The two properties you need are <code>width<\/code> and <code>initial-scale<\/code>.<\/p>\n<p>The <code>width<\/code> property is set to <code>device-width<\/code>. The <code>initial-scal<\/code> property is set to <code>1<\/code>.<\/p>\n<p>Here is the completed <code>meta<\/code> tag line.<\/p>\n<pre class=\"brush: xml; collapse: false; first-line: 1; title: ; notranslate\" title=\"\">\r\n &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\r\n<\/pre>\n<p>The <code>width<\/code> is in pixels. The <code>initial-scale<\/code> is actually a multiplier. Without setting other content properties, one means really no scaling.<\/p>\n<p>The other content properties include height <code>minimum-scale<\/code>, <code>maximum-scale<\/code> and <code>user-scalable<\/code>.<\/p>\n<p>[ad name=&#8221;Google Adsense&#8221;]<\/p>\n<p>The <code>minimum-scale<\/code>, <code>maximum-scale<\/code> properties are the minimum and maximum viewport scales with a range. For Safari mobile web browser that range is 0-10.<\/p>\n<p>The <code>user-scalable<\/code> property determines whether or not the user can zoom in and out to change the scale of the viewport. Values are <code>yes<\/code> and <code>no<\/code>.<\/p>\n<p>Here is the <code>meta<\/code> tag in the <code>head<\/code> section of your HTML. <\/p>\n<pre class=\"brush: xml; collapse: true; first-line: 1; highlight: [5]; light: false; title: ; toolbar: true; notranslate\" title=\"\">\r\n&lt;!doctype html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=&quot;UTF-8&quot;&gt;\r\n&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\r\n&lt;title&gt;CSS Mobile Media Queries 101 | Lon Hosford&lt;\/title&gt;\r\n<\/pre>\n<p><strong>Examples and Demo<\/strong><\/p>\n<p>If you are following along with the series, we are adding the <code>meta<\/code> tag for the viewport. This video reviews the problem, presents some examples of the problem, discusses the viewport <code>meta<\/code> tag properties and adds the single line to our practice file.<\/p>\n<p>[iframe https:\/\/www.youtube.com\/embed\/5xFRFBW-jwQ 640 360]<\/p>\n<p>Source Files for the video series: <a href=\"http:\/\/bit.ly\/P8RpJV\" target=\"_blank\" title=\"Source File Download Link\">Download<\/a><\/p>\n<p><g:plusone annotation=\"inline\"><\/g:plusone><\/p>\n<div id=\"fb-root\"><\/div>\n<p><script src=\"https:\/\/connect.facebook.net\/en_US\/all.js#appId=105467682877384&amp;xfbml=1\"><\/script><fb:like href=\"https:\/\/www.lonhosford.com\/lonblog\/2014\/03\/29\/mobile-first-responsive-design-setting-the-viewport\/\" send=\"true\" width=\"450\" show_faces=\"true\" font=\"\"><\/fb:like><\/p>\n<div id=\"fb-root\"><\/div>\n<p><script src=\"https:\/\/connect.facebook.net\/en_US\/all.js#xfbml=1\"><\/script><fb:comments href=\"https:\/\/www.lonhosford.com\/lonblog\/2014\/03\/29\/mobile-first-responsive-design-setting-the-viewport\/\" num_posts=\"3\" width=\"500\"><\/fb:comments><\/p>\n<p>[ad name=&#8221;Pearson Web Dev Books&#8221;]<\/p>\n<p><!-- Place this render call where appropriate --><br \/>\n<script type=\"text\/javascript\">\n  (function() {\n    var po = document.createElement('script'); po.type = 'text\/javascript'; po.async = true;\n    po.src = 'https:\/\/apis.google.com\/js\/plusone.js';\n    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);\n  })();\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Previous | Part 2 of 5 | Next By Lon Hosford Mobile web browsers may scale down your web page. That can result in an unattractive and unreadable content. They may show a partial width of your page. This makes the user resize and horizontally scroll your page. Or worse they might just hit the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,118],"tags":[119,120,121],"class_list":["post-3419","post","type-post","status-publish","format-standard","hentry","category-general","category-tutorial","tag-css","tag-media-queries","tag-responsive-design"],"_links":{"self":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/3419","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/comments?post=3419"}],"version-history":[{"count":55,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/3419\/revisions"}],"predecessor-version":[{"id":3649,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/3419\/revisions\/3649"}],"wp:attachment":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/media?parent=3419"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/categories?post=3419"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/tags?post=3419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}