Topic: <meta http-equiv="x-ua-compatible" content="ie=edge"> Description:

The x-ua-compatible tag allows you to chose what version of Intenet Explorer the page should be rendered as. This has changed in modern browsers, so if you are not targeting IE 9 or 8 you can consider removing this all together. Foundation has this because it supports older browsers which is why it is included.

If you are using this tag you want it to be at the top of your head.

Topic: <meta name="viewport" content="width=device-width, initial-scale=1.0"> Description:

YOU SHOULD ALWAYS INCLUDE THIS!

This ultimately sets us up so that our users do not have to scroll horizontally to view content. It is a big part of responsive design, and the user experience on a site.

The viewport is the user's visible area of a web page. This of course changes with the device, for example it will be smaller on a mobile device. So in HTML5 The meta tag received supoort for tracking the viewport.

This tag gives the browser instructions on how to control the page dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen width of the device

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser

THINGS TO REMEMBER:

Do NOT use large fixed width elements DO NOT let content rely on a particular viewport width to render well DO use CSS Media queries to apply different styling for small and large screens -you still shouldn't be using fixed widths. consider using relative widths such as width: 100%