Setting Up viewport

By adding <head> element to the page tell the browser that we know what we’re doing.

we need to use the meta viewport value width = device-width, which instructs the page to match the screen’s width in device independent pixels. this allows the page to reflow content to match the screen sizes.

Adding the attribute initial-scale = 1 instructs the browsers to establish a one to one relationship between device independent pixels and CSS pixels


<meta name="viewport" content="width=device-width,inital-scale=1.0" >
!IMPORTANT : DONT FORGET TO ADD THIS CODE WHEN U DO RESPONSIVE WEBSITE.


CSS pixels are what we’re used to working with most of the time, and its only one we should worry about. with initial-scale = 1 some browsers will the page width constant when rotating to landscape mode. They also scale the content rather than allowing it to reflow.

 

 

 

 

source: Udacity.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s