Digital Marketing and Web Design Agency WebCoreLab

Digital Marketing and Web Design Agency WebCoreLabDigital Marketing and Web Design Agency WebCoreLab

  • Terms
  • Privacy
  • SUPPORT
  • ABOUT US
  • CONTACTS

Digital Marketing and Web Design Agency WebCoreLabDigital Marketing and Web Design Agency WebCoreLab

  • WEBSITE DEVELOPMENT
    • CATALOG
    • DIGITAL COMPLEX
    • LANDING PAGE
    • CUSTOM WEBSITE
    • ONLINE SHOP
    • PROMO SITE
  • DIGITAL MARKETING
    • CONTEXT ADVERTISING
    • SMM
      • Facebook
      • Instagram
      • Youtube
      • LinkedIn
      • Pinterest
      • Google+
      • Twitter
  • LOCAL MARKETING
    • CREATION AND OPTIMIZATION
    • WORKING WITH BUSINESS LISTINGS
    • DAILY SUPPORT
  • SEMANTIC CORE
    • Audit of the Semantic Core
  • ORGANIC SEO
    • Development of the semantic core
    • Analysis of the reference mass
    • Site Audit
    • Usability Audit
    • SEO optimization of the site at the development stage
    • Site output from the FILTERS OF GOOGLE
  • DEVELOPMENT
    • Custom CRM for Enterprise Company
    • DEVELOPMENT OF MOBILE APPLICATIONS
      • Android Apps Development
      • iOS apps Developing
  • UX DESIGN
  • WEB-DESIGN
    • Online Store Design
    • Individual Site Design
    • Corporate Site Design
    • Landing Page Design
    • Adaptive Design
    • Website redesign
CONTACT
  • Home
  • News
  • News
  • What the viewport meta tag is and how it is used

What the viewport meta tag is and how it is used

Friday, 26 April 2019 / Published in News

What the viewport meta tag is and how it is used

Meta tag Viewport is used to adapt the site to all devices and sets the rules for displaying the visible area in a mobile browser. To activate a tag, you need to add it to the Head section of the page code, setting the necessary parameters.

What does the viewport tag mean?

Viewport is an area on the device screen that is visible to the user without scrolling the screen. Imagine a page that normally displays on a laptop screen. Letters, icons and other elements are in optimal size, it is convenient for you to read the text.

The same page on the smartphone turns out to be quite inconvenient for reading. You have to move images and text right and left, down and up. If you set the Viewport tag, the web page will look:

On the image on the left, the page is displayed without the Viewport tag, and on the right with its help the display parameters are set. The option on the left is not convenient for reading, so the user will quickly leave such a site.

With an adaptive design, it will be more convenient for him to read the text, make purchases and navigate between sections of the site. In order for a web page to display normally on devices with different resolutions, it is important to set the correct settings for the Viewport tag.

Viewport tag settings for different devices

In most cases, the line with the Viewport tag looks like this:

The first parameter Width instructs the browser to adapt the width of the page to the device on which it is open. Page width scaling is determined automatically if “device-width” is specified. You can also set a numeric value from 200 to 10,000 pixels. In this case, the parameter will look like this:

In this case, the screen layout can not be less than 800 pixels in width. If this value is larger, the browser will stretch the visible area to full scale. The need to use Viewport came after the active distribution of high-resolution smartphones. In them, even sites adapted for mobile devices are not always displayed correctly.

For example, take for comparison two smartphones with a diagonal of 3.5 inches, but with different pixel densities. In the first, this figure is up to 200 pixels, and in the second – more than 300 pixels. The same web page will look different on both smartphones, despite the same screen size.

In the first smartphone, the page will be displayed normally and will be easy to read, like on a computer monitor. In the second case, due to the increased pixel density, the text will appear twice as small. To bring the page into a normal view, its scale must be doubled. Meta tag Viewport can be used for adaptive and non-adaptive versions of sites.

Another parameter – initial-scale – means the scaling factor. If the value is “1”, the resolution of the CSS and the devices are equal to each other, regardless of the screen size. You can specify any parameter value from 0.1 to 10.

How to determine the screen resolution of a particular device?

By pixel density. If the index is less than 200 pixels, the screen resolution will be equal to the actual one (CSS coefficient = 1). If the density is more than 200, but less than 300 pixels – the resolution will be 1.5 times less than the actual (coefficient CSS = 1.5). At a density of more than 300 pixels, the resolution is determined by the formula:


density indicator / 150 rounded to the nearest whole number


For example, in the Galaxy S3 smartphone, the pixel density indicator is 233, and the screen resolution is 480×800. In this case, the coefficient CSS = 1,5. This means that the actual resolution will be 1.5 times less than the specified one and will be 320×533 pixels.

In the more modern Galaxy S5, the pixel density is 441, and the screen resolution is 1080×1920. Since the density is more than 300, you need to divide 441 by 150, after rounding it will turn out 3. The final expansion is 360×640.

Where to register tag Viewport?

In the Head section of each page that needs to be scaled to fit the screen resolution. In addition to the width and scaling factor, you can use additional parameters:

  • height – sets the height of the area displayed for viewing. You can specify the device-hight constant, which means automatic scaling to fit the screen, or a numeric value from 200 to 10,000 pixels;
  • user-scalable – allows or denies custom page scaling, set to Yes or No;
  • minimum-scale — minimum scale value (from 0.1 to 10);
  • maximum-scale – the maximum value of the scale (from 0.1 to 10).

In practice, it looks like this:

In this case, the user will not be able to manually scale the screen, and the maximum scale is equal to its actual value.

Not all versions of mobile browsers support the Viewport tag. Opera Mobile Mini, Symbian, Openwave, and some other versions of older browsers do not respond to Viewport commands. In this case, the optimization of the site for mobile devices can be carried out using an older method, namely through meta tags:

You can set the Viewport tag on WordPress sites without writing any code manually. To do this, you need to download and install the appropriate plugin.

Conclusion

The Viewport tag is used to optimize sites for mobile devices. It allows you to adapt the size of the visible area of ​​the page to the screen of the visitor’s device.

The most optimal value is the automatic scaling of the page width to fit the screen. You can also set the page height, zoom factor, enable or disable manually enlarge / reduce the screen.

To activate the meta tag, you need to add a line with the necessary parameters to the Head section of each page of the site or install the appropriate plug-in for your CMS.

Share this:

  • Twitter
  • Facebook

Like this:

Like Loading...
  • Tweet
Tagged under: mobile seo, SEO, Site audit, technical seo

What you can read next

What is the input type = “password” and how does it threaten the user’s security
Ways to make your YouTube marketing strategy effective
Ways to make your YouTube marketing strategy effective
Tips to boost organic traffic for every SEO company
Tips to boost organic traffic for every SEO company

Leave a Reply Cancel reply

Recent Comments

    Recent Posts

    • THE MAIN ERRORS OF WEBSITE DESIGN

          Website design is more than just ...
    • 10 SIGNS OF AN OUTDATED SITE: HOW TO CHECK AND PREVENT.

      The site is the face of the organization, so it...
    • Main Reasons Why Fresh Content is Important for Your SEO and Web

        What are different reasons it is signifi...
    • How the ranking in google search works in 2020 – all secrets

      How Google Ranks Sites: Algorithms and the Sear...
    • Eight non-obvious things in SEO, that will increase the visibility of the site

      Hello everyone, watching the work on website pr...

    Archives

    • January 2020
    • September 2019
    • August 2019
    • July 2019
    • June 2019
    • May 2019
    • April 2019
    • June 2017

    Categories

    • News

    webcorelab

    120 Eglinton East, Suite 500
    Toronto ON M4P1E2
    Toll free Canada: +16475465599
    Secondary phone Canada: +18888931842 for US
    +380891205858 for UA & RU
    Email: info@webcorelab.com

    • WEBSITE DEVELOPMENT
      • CATALOG
      • DIGITAL COMPLEX
      • LANDING PAGE
      • CUSTOM WEBSITE
      • ONLINE SHOP
      • PROMO SITE
    • DIGITAL MARKETING
      • CONTEXT ADVERTISING
      • SMM
        • Facebook
        • Instagram
        • Youtube
        • LinkedIn
        • Pinterest
        • Google+
        • Twitter
    • LOCAL MARKETING
      • CREATION AND OPTIMIZATION
      • WORKING WITH BUSINESS LISTINGS
      • DAILY SUPPORT
    • SEMANTIC CORE
      • Audit of the Semantic Core
    • ORGANIC SEO
      • Development of the semantic core
      • Analysis of the reference mass
      • Site Audit
      • Usability Audit
      • SEO optimization of the site at the development stage
      • Site output from the FILTERS OF GOOGLE
    • DEVELOPMENT
      • Custom CRM for Enterprise Company
      • DEVELOPMENT OF MOBILE APPLICATIONS
        • Android Apps Development
        • iOS apps Developing
    • UX DESIGN
    • WEB-DESIGN
      • Online Store Design
      • Individual Site Design
      • Corporate Site Design
      • Landing Page Design
      • Adaptive Design
      • Website redesign
    TOP
    %d bloggers like this: