{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "guides",
    "type" : "single",
    "title" : "The viewport is the window to your site |Digital.gov",
    "description": "The viewport is the window to your site",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/guides/mobile-principles/viewport/index.json","item" : [
    {"title" :"The viewport is the window to your site","summary" : "Week two of our series covers the benefits of setting your viewport.","date" : "2018-10-09T12:30:00-05:00","date_modified" : "2025-01-27T19:42:55-05:00","primary_image" : { "uid" : "guide-mobile-principles", "alt" :
  "Vector illustration of a mobile phone", "width" :
  "1200", "height" :
  "630", "credit" :
  "Irina_Strelnikova/iStock via Getty Images", "caption" :
  "", "format" :
  "png" },"branch" : "bc-archive-content-3",
      "filename" :"principles-viewport.md",
      
      "filepath" :"guides/mobile-principles/principles-viewport.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/guides/mobile-principles/principles-viewport.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/guides/mobile-principles/principles-viewport.md","slug" : "viewport","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/guides/mobile-principles/viewport/","aliases" : {"0" : "/resources/mobile/principles/viewport"},"content" :"\u003cp\u003eThis week we will focus on the viewport, which is a major cause of mobile unfriendliness.\u003c/p\u003e\n\u003cp\u003eThe viewport is the visual area of a webpage as it is displayed on a device (smartphone or tablet) screen or monitor. In the past, most of us used computer monitor of a standard size, but once we started accessing the Internet with smart phones and tablets, that fixed width web page was too large to fit on smaller screens (viewports). There seem to be thousands of screen sizes available as shown in \u003ca href=\"http://viewportsizes.com/\"\u003eViewport Sizes\u003c/a\u003e and \u003ca href=\"http://www.screensiz.es/\"\u003eScreen Sizes\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eTo address this issue, the browsers on those smaller devices would scale down the entire web page to fit the screen. However, that created another issue: a full-size web page that looked great on the desktop, but was now only a few inches tall, and in most cases, too small to use. Not to fear, Responsive Web Design (RWD) came in to save the day! RWD is all about using HTML and CSS to automatically resize, hide, shrink, or enlarge a website to make it look good on all device displays. But things can still go wrong.\u003c/p\u003e\n\u003cp\u003eThe following are two solutions to preventable issues caused by the incorrect implementation of a viewport on a site.\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003eConfigure the Viewport\u003c/strong\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSize Content to the Viewport\u003c/strong\u003e\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eBelow are simple fixes for viewport usability issues.\u003c/p\u003e\n\u003ch2 id=\"configure-the-viewport\"\u003eConfigure the Viewport\u003c/h2\u003e\n\u003cp\u003e\u003cstrong\u003eIssue: Without defining the viewport, size the page won\u0026rsquo;t shrink to fit the screen.\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003ePages should specify a viewport size using the meta viewport tag in the header, which tells the browser how to adjust the page’s dimension and scaling for optimal rendering to suit the device so the portion of the website visible to the user is appropriate.\u003c/p\u003e\n\u003cp\u003eInstead of explicitly defining viewport sizes, some opt to go one step further by using viewport breakpoints, which allow one to set a browser dimension “size range,” and when the browser dimensions are within that size range, only the styles associated with that media query will apply. By setting these breakpoints or media queries, one is able to change the page layout depending on the page size.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSolution: Set the viewport!\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003ePages optimized for a variety of device sizes should include a \u003ccode\u003e\u0026lt;meta\u0026gt;\u003c/code\u003e viewport tag in the head of the document. This provides instructions to the browser on how to control the page\u0026rsquo;s dimensions and scaling. Google recommends writing the line of code as follows:\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003e\u0026lt;meta name=\u0026quot;viewport\u0026quot; content=\u0026quot;width=device-width, initial-scale=1\u0026quot;\u0026gt;\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003eThe \u003ccode\u003ewidth=device-width\u003c/code\u003e attribute in the \u003ccode\u003econtent\u003c/code\u003e element tells the browser to make the width of the page the same width as whatever screen it is being shown on.\u003c/p\u003e\n\u003cp\u003eThe \u003ccode\u003einitial-scale=1\u003c/code\u003e attribute in the \u003ccode\u003econtent\u003c/code\u003e element lets the browser know that if the page is shown in landscape (a phone or tablet turned sideways), make the page as wide as it can be within that screen.\u003c/p\u003e\n\u003ch3 id=\"references\"\u003eReferences\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eConfigure the Viewport\u003c/strong\u003e | \u003ca href=\"https://varvy.com/mobile/configure-viewport.html\"\u003ehttps://varvy.com/mobile/configure-viewport.html\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eMobile Usability Report\u003c/strong\u003e | \u003ca href=\"https://support.google.com/webmasters/answer/6101188?hl=en\"\u003ehttps://support.google.com/webmasters/answer/6101188?hl=en\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eResponsive Design Viewports\u003c/strong\u003e | \u003ca href=\"https://www.w3schools.com/css/css_rwd_viewport.asp\"\u003ehttps://www.w3schools.com/css/css_rwd_viewport.asp\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSet the Viewport\u003c/strong\u003e | \u003ca href=\"https://developers.google.com/web/fundamentals/design-and-ux/responsive/#set-the-viewport\"\u003ehttps://developers.google.com/web/fundamentals/design-and-ux/responsive/#set-the-viewport\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eUsing the Viewport Meta Tag to Control Layout on Mobile Browsers\u003c/strong\u003e | \u003ca href=\"https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag\"\u003ehttps://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eViewport\u003c/strong\u003e | \u003ca href=\"https://www.techopedia.com/definition/32644/viewport\"\u003ehttps://www.techopedia.com/definition/32644/viewport\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eViewport Breakpoints\u003c/strong\u003e | \u003ca href=\"https://docs.telerik.com/devtools/aspnet-ajax/controls/pagelayout/creating-responsive-design/viewport-breakpoints\"\u003ehttps://docs.telerik.com/devtools/aspnet-ajax/controls/pagelayout/creating-responsive-design/viewport-breakpoints\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"size-content-to-the-viewport\"\u003eSize Content to the Viewport\u003c/h2\u003e\n\u003cp\u003e\u003cstrong\u003eIssue: Content explicitly sized by pixels (px) does not always display correctly on small screens\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eWhile the viewport might be set properly, some content may be cut off, or a user needs to scroll horizontally to see your content (words or graphics) on the page. This occurs when content is not sized properly to fit the screen and is, in most cases, caused by either the use of absolute values in CSS declarations or using images designed to look best at a specific browser width. For example, if an image is included using\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003e\u0026lt;img src=\u0026quot;MyGraphic.png\u0026quot; style=\u0026quot;width:600px;\u0026quot; \u0026gt;\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003eThis means that even though we are responsive, the image will be cut off on devices that are less than 600 pixels wide.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSolution: At the most, set the maximum width of the content to 100 percent!\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eTo fix this issue, do not declare the image width explicitly with an exact number of pixels, declare the width as a percentage or other relative measurement.\u003c/p\u003e\n\u003cp\u003eFor example, a good practice would be to use:\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003e\u0026lt;img src=\u0026quot;MyGraphic.png\u0026quot; style=\u0026quot;max-width:100%;\u0026quot; \u0026gt;\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003eThis adjusts the size to a percentage of the screen size.\u003c/p\u003e\n\u003cp\u003eThis works fine for your text and graphics, but if you are using third-party widgets, frames, or videos from others, BEWARE. You may need to figure another way to size the object to display properly on the different viewports.\u003c/p\u003e\n\u003ch3 id=\"references-1\"\u003eReferences\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e\u0026lt;img width=\u0026quot;\u0026quot;\u0026gt;\u003c/strong\u003e | \u003ca href=\"https://html.com/attributes/img-width/\"\u003ehttps://html.com/attributes/img-width/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eFluid Images\u003c/strong\u003e | \u003ca href=\"https://templates.mailchimp.com/development/responsive-email/fluid-images/\"\u003ehttps://templates.mailchimp.com/development/responsive-email/fluid-images/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eMobile Usability Report\u003c/strong\u003e | \u003ca href=\"https://support.google.com/webmasters/answer/6101188?hl=en\"\u003ehttps://support.google.com/webmasters/answer/6101188?hl=en\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eResponsive Web Design Basics\u003c/strong\u003e | \u003ca href=\"https://developers.google.com/web/fundamentals/design-and-ux/responsive/#size_content_to_the_viewport\"\u003ehttps://developers.google.com/web/fundamentals/design-and-ux/responsive/#size_content_to_the_viewport\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSize Content to the Viewport\u003c/strong\u003e | \u003ca href=\"https://varvy.com/mobile/content-size-viewport.html\"\u003ehttps://varvy.com/mobile/content-size-viewport.html\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n"}
  ]
}