Editing Responsive design (section)

==meta tag: no zoom out==

Phone browsers: don’t just display the page at 100 percent. Instead, phone browsers zoom out to fit the page on screen. 

The exact amount they zoom out varies from phone to phone. Safari on the iPhone, for example, acts like the screen is really 980 pixels wide, so it shrinks the page down to fit within 980 pixels.

This behavior of mobile browsers works well for the majority of sites, but not so well with a responsive web design. '''Because responsive sites are intended to look good on phones, you don’t want the display to zoom out.'''

there’s a simple way to override this behavior of mobile browsers. 

Simply add the following code to the <code>&lt;head&gt;</code>

<code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;</code>

HTML meta tags provide extra information about the page’s content and can give browsers extra instructions about how to display the page. In this case, the viewport refers to the browser screen, and the content attribute sets the width of the browser to the width of the phone