Skip to main content

New Viewport Meta Tag in HTML5

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

Popular posts from this blog

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 going to activate wi

Earn $25 For Each Referral By Payoneer

Payoneer is Bank Of America online bank account facility for recieving and sending money online.The companies which want to recieve/send money from/to United States for that purpose payoneer is a very conveyance for all over the world.It is very easy to use also. Even more with payoneer account you can also earn money by referring your friends each referrel will apply for the account you and your referral will get $25 credit into your accounts. So by the marketing programme you can earn a lot of money easily while working little bit on the internet.