|
|
|
@ -3,41 +3,41 @@
|
|
|
|
Topic: `<meta http-equiv="x-ua-compatible" content="ie=edge">`
|
|
|
|
Topic: `<meta http-equiv="x-ua-compatible" content="ie=edge">`
|
|
|
|
Description:
|
|
|
|
Description:
|
|
|
|
|
|
|
|
|
|
|
|
The x-ua-compatible tag allows you to chose what version of
|
|
|
|
The x-ua-compatible tag allows you to chose what version of
|
|
|
|
Intenet Explorer the page should be rendered as. This has changed in
|
|
|
|
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
|
|
|
|
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
|
|
|
|
removing this all together. Foundation has this because it supports older
|
|
|
|
browsers which is why it is included.
|
|
|
|
browsers which is why it is included.
|
|
|
|
|
|
|
|
|
|
|
|
If you are using this tag you want it to be at the top of your head.
|
|
|
|
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">`
|
|
|
|
Topic: `<meta name="viewport" content="width=device-width, initial-scale=1.0">`
|
|
|
|
Description:
|
|
|
|
Description:
|
|
|
|
|
|
|
|
|
|
|
|
YOU SHOULD ALWAYS INCLUDE THIS!
|
|
|
|
YOU SHOULD ALWAYS INCLUDE THIS!
|
|
|
|
|
|
|
|
|
|
|
|
This ultimately sets us up so that our users do not have to scroll horizontally
|
|
|
|
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
|
|
|
|
to view content. It is a big part of responsive design, and the user experience
|
|
|
|
on a site.
|
|
|
|
on a site.
|
|
|
|
|
|
|
|
|
|
|
|
The viewport is the user's visible area of a web page. This of course changes
|
|
|
|
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
|
|
|
|
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.
|
|
|
|
The meta tag received supoort for tracking the viewport.
|
|
|
|
|
|
|
|
|
|
|
|
This tag gives the browser instructions on how to control the page dimensions
|
|
|
|
This tag gives the browser instructions on how to control the page dimensions
|
|
|
|
and scaling.
|
|
|
|
and scaling.
|
|
|
|
|
|
|
|
|
|
|
|
The `width=device-width` part sets the width of the page to follow the screen
|
|
|
|
The `width=device-width` part sets the width of the page to follow the screen
|
|
|
|
width of the device
|
|
|
|
width of the device
|
|
|
|
|
|
|
|
|
|
|
|
The `initial-scale=1.0` part sets the initial zoom level when the page is first
|
|
|
|
The `initial-scale=1.0` part sets the initial zoom level when the page is first
|
|
|
|
loaded by the browser
|
|
|
|
loaded by the browser
|
|
|
|
|
|
|
|
|
|
|
|
THINGS TO REMEMBER:
|
|
|
|
THINGS TO REMEMBER:
|
|
|
|
|
|
|
|
|
|
|
|
Do NOT use large fixed width elements
|
|
|
|
Do NOT use large fixed width elements
|
|
|
|
DO NOT let content rely on a particular viewport width to render well
|
|
|
|
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
|
|
|
|
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
|
|
|
|
-you still shouldn't be using fixed widths. consider using relative widths
|
|
|
|
such as `width: 100%`
|
|
|
|
such as `width: 100%`
|
|
|
|
|
