Updated Readme and Notes
parent
cb7da3e6ab
commit
5458e5a69c
@ -1 +1,48 @@
|
|||||||
# Just trying out some notes
|
# 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%`
|
||||||
|
@ -1,43 +1,13 @@
|
|||||||
|
# Vuejs Playground
|
||||||
|
|
||||||
|
We all need somewhere to play. This is a simple repo for experiments with the
|
||||||
|
Vuejs library. You will need [Sass](http://sass-lang.com/) to compile the css used by this project.
|
||||||
|
|
||||||
Topic: `<meta http-equiv="x-ua-compatible" content="ie=edge">`
|
You will also probably want a dev server like live-server.
|
||||||
Description:
|
|
||||||
|
|
||||||
The x-ua-compatible tag allows you to chose what version of
|
`npm install -g live-server`
|
||||||
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.
|
Alternatively you could just use python but there is no file watch associated
|
||||||
|
with this option.
|
||||||
|
|
||||||
|
`python -m http.server`
|
||||||
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%`
|
|
||||||
|
Loading…
Reference in New Issue