On the right is the same page with a viewport On the left is a page without a meta viewport specified - the mobileīrowser therefore assumes desktop width and scales the page to fit the screen, Mobile-friendly because it requires this type of interaction on a Users may have to double-tap or pinch-to-zoom in order to be able to see and Part of the content that fits within the screen.įor users, this means that font sizes may have an inconsistent appearance, and Mobile browsers then try to make the content look better by increasingįont sizes and either scaling the content to fit the screen or showing only the Page at a desktop screen width (usually about 980px, though this varies acrossĭevices). The meta viewport element is absent, mobile browsers default to rendering the The meta viewport tag gives the browser instructions on how toĪdjust the dimensions and scaling of the page to the width of the device. To signal to browsers that your page adapts to all devices, add a meta tag
Check out Web Fundamentals for more documentation.
Google's algorithms should be able to automatically detect this setup if all
HTML code to all devices and CSS is used to alter the rendering of the page on Responsive web design is a setup where the server always sends the same