You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.6 KiB
Markdown
47 lines
1.6 KiB
Markdown
# Meta Tags
|
|
|
|
### x-ua-compatible
|
|
|
|
`<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.
|
|
|
|
### viewport
|
|
|
|
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%`
|