In the example above, the situation could have been avoided by using a relative width value, such as width: 100%. If a page contains large absolute CSS widths for page elements (such as the example below, with an element set to 344px wide), this would cause the div to be too wide for the viewport, and cause the user to scroll. Examples that trigger this Hint:Ĭonsider a device with a width of 320 CSS pixels, such as an iPhone. This Hint will trigger for any internal URL which contains page content that is either smaller or larger in width than the defined viewport width. Please note that this is not an issue if a separate mobile version of the page is set up.

If this does not happen, then the page is not responsive and is not optimized for mobile devices. When the screen is made smaller or larger than the viewport width, the content should re-size to fit, on responsive webpages. A viewport element gives the browser instructions on how to control the page's dimensions and scaling. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. The browser's viewport is the area of the window in which web content can be seen. This means that the URL in question is not responsive, and the page content does not size accordingly when the screen size is changed. This Hint represents an error or problem that needs to be fixed.Ĭontent does not size correctly to viewport This Hint is very important, and definitely warrants attention.

Iphone viewport size