New Viewport Meta Tag in HTML5

The most important of the new meta tags is the viewport meta tag. This meta tag was initially introduced by Mobile
Safari and is used as a way to allow developers to define the width and the scaling of the viewport. When used
incorrectly, the viewport meta tag can cause a terrible experience for users.
The viewport meta tag content consists of a comma-separated list of key value pairs, the values that can be used are:

1. width:– The width of the viewport.

2. initial-scale: The scale of the site when it initially loads.

3. user-scalable: By default, the user can zoom the site, setting “user-scalable” to “no” disables this. This is bad for the accessability of the site so it is discouraged.

4. maximum-scale: Allows you to define a maximum level that the user can zoom the site.Although not as bad as user-scalable, this can still be harmful to accessability.If you were to add this meta tag to a nonresponsive site, you would set the viewport meta tag to have a sensible width to display the site comfortably. If you take an example of a 980px site, which is centrally aligned, you would want to include a bit of spacing around the edges, so you might set the viewport width to 1024px, as shown in this example:

<meta name="viewport" content="width=1024, initial-scale=1">

For responsive design, you want the width of the viewport to be equal to the width of the device you are using.This is for two key reasons: first, you will be building your CSS to target the width of the viewport so you want the viewport width to match the device width. Second, it tells the device that the site is mobile optimized and that it therefore does not need to load the page with a large default viewport zoomed out. To make the viewport equal to the width of the device you are using, you set the value for the viewport width to device-width instead of specifying a specific size. You also want your site to start with a default zoom level, so you have initial-scale set to 1, as shown in the following example:

<meta name="viewport" content="width=device-width, initial-scale=1">

Comments

Sahih Bukhari Sharif In Urdu PDF

Sahih Bukhari is a collection of sayings and deeds of Prophet Muhammad (S.A.W), also known as the sunnah. The reports of the Prophet's sayings and deeds are called ahadeeth. Bukhari lived a couple of centuries after the Prophet's death and worked extremely hard to collect his ahadeeth. Each report in his collection was checked for compatibility with the Qur'an , and the veracity of the chain of reporters had to be painstakingly established. Bukhari's collection is recognized by the overwhelming majority of the Muslim world to be one of the most authentic collections of the Sunnah of the Prophet (S.A.W). Bukhari (full name Abu Abdullah Muhammad bin Ismail bin Ibrahim bin Al-Mughira al-Ja'fai ) was born in 194 A.H. and died in 256 A.H. His collection of hadeeth is considered second to none. He spent sixteen years compiling it, and ended up with 2,602 hadeeth (9,082 with repetition). His criteria for acceptance into the collection were amongst the most...

Download Free Windows 7 Loader/Activator

What is Windows Loader? Win Loader is a tool designed to activate many Microsoft products without using genuine licenses. It may look illegal to most of people but this is a security hole in their operating system that they didn’t pay much attention to. We take the advantage of it to activate their products for free. How It Actually Works? When you click the activate button, first it tries to connect to one of the KMS servers available. KMS stands for Key Management Service which is used in Windows operating systems since 2006 to perform windows and office product activation tasks. There are hundreds of KMS servers available from various software publishers around the world. After it successfully established a connection with a KMS server, it downloads the necessary token files (.tc files) it needs to activate the specific Microsoft product. It can be Office 2013, Windows 7, Office 365 or anything. It doesn’t matter what product you are g...

HTML5 Basic Video Tutorials

When we thinks about inventing something new first step we take for achieving that goal is making a map in our mind that how we will start and how will take the things go ahead. Same like this a web developer/designer while starting a project first makes the structure of any website.All the content should be clear that a web developer wants to demonstrate on a web page so that visitors could easily understand the content. HTML is a basic pillar of any website for creating a website structure which is mostly web developer's using now days.In HTML5 there are many new features introduced for enhancing the web layout.In web developing layout is the most important part.If we have good knowledge of HTML we can develop advanced web pages. In this video tutorial i am trying to explain some of HTML5 techniques but i made mistakes of-course i can so please ignore that mistakes and rectify my errors because i am also learner of web designing and developing . Here i am sh...

All Freeware

Search This Blog