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%`