Enable Responsive Layouts with Viewport Meta Tag
Oh, how annoying when you go on to the site, but it does not have responsive layouts, and you have to use these inconvenient horizontal scroll bars. There are fewer and fewer awkward sites on the Internet every year, but the problem has not wholly disappeared.
We invite you to learn how to enable responsive layouts with the Viewport meta tag and make your site as user-friendly as possible. There is a chance that another responsive website will appear in the world if you read this article to the end. At least, our Drupal website development team truly believes so!
What does the Viewport meta tag mean?
The viewport is the visible area of the page that is available to the user without scrolling the screen. The size of the viewport will vary depending on the type of device, from smartwatches to PC.
The viewport meta tag makes the site convenient to view on different devices. It tells the browsers how to display the site on mobile, tablets, and other devices screen.
The fact is that by default, mobile browsers display the site page in the same way as on a PC. The reason is that the device's resolution is larger than the width of the device. That is, if you view the page from a mobile device, it will be inconvenient. This spoils the site's appearance and makes it unsuitable for use on mobile devices.
Where to add the Viewport meta tag?
Meta tag viewport is, first of all, about convenience. You should add meta tags to the "header" of each page that needs to be scaled to the screen resolution. You can take a ready-made template and manually add parameters to match your individual request.
A short guide on how to enable responsive layouts with Viewport Meta Tag
Flexible and fluid layouts are the foundation of all responsive viewports. There is a viewport meta tag for all users who conveniently view your site without any horizontal scrollbars. How does it work? Below we will explain to you step by step how to do it correctly. So, let's get down to business!
- Open your file system, go to sites, click all, and open YOUR_THEME after checking if your theme has an html.tpl.php template file.
- There are two possible options for deploying further actions:
- if you found this file, then you are a lucky man
- if you don't find this file, you need to go to the root of your Drupal site. Then you need to find and copy the modules/system/html.tpl.php file and paste it manually into your theme's root. - Once you have pasted this file, open it with any text editor.
- Find this piece of code: <meta name="viewport" content="initial-scale=1.0, width=device-width" />. Paste it in your theme's html.tpl.php file inside the <head> tag.
- The next step is to clear the cache on the Drupal site. To do this, go to the Admin menu," then "Configuration," then "Performance," and there click on the "Clear all caches" button. If you have Drush, you can run drush cc from your CLI.
- And the last crucial step is testing your site. The easiest way to do this is in Chrome. Go to your site in Chrome, right-click and select "Inspect." After the completed actions, a new window will appear at the top right. Click on the mobile phone icon to see if your site is responsive and displaying correctly.
The basic viewport meta tag attributes
- Width - sets the width of the visible area so that it is equal to the CSS width of the device. You can specify the device-width role to set the page width to the width of a smartphone or other gadget.
- Initial-scale - an attribute that sets the initial scale of the page.
- Height - sets the height of the area to be displayed for viewing. To set this parameter to the device's height, use the device-height value.
In addition, inside the code, you can specify additional parameters using the viewport tag. If necessary, it is possible to specify further details to prevent the user from using scaling and set options when the template automatically adapts to the window orientation.
- user-scalable - enables or disables custom page scaling, set to Yes or No.
- minimum-scale - minimum scale (from 0.1 to 10).
- maximum-scale - maximum scale value (from 0.1 to 10).
How do Responsive Layouts with device-width work?
The width=device-width is a command or even a hint for browsers. This shows precisely how the browser handled the size of the viewport. And the probability that horizontal scrollbars will reappear on the page is zero. This meta tag viewport helps the mobile browser understand the width of the device's viewport, regardless of orientation.
Once the browser, and especially the mobile one, has been notified of what device width to use, we can perform media queries. So-called media queries are needed to change layouts and stack columns to make it convenient for all mobile users to view all content without scrollbars. After completing all the steps, viewing your site from various mobile devices will give visitors pleasure and a positive user experience.
To sum up!
The Viewport meta tag is used to optimize websites 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 to scale the page width to fit the screen automatically. You can set the page height scaling factor, enable or disable manual zoom in/out of the screen, and so on, but this already takes more time.
Websites that are not adapted to devices with different screens lose the most traffic. Make your site responsive, so your content is easy to view on any device. Since most browsers now support the Viewport meta tag, you shouldn't have any problems with it at all. And if you still have them, then turn to Drupal services for help.
Comments
Thank you for your effort!
Hi, thank you for your effort writing this blogpost.
But, Drupal 7 theming in php template files at the end of December 2022 ?
I think it is time for an update.
Wishing you the best, have a nice day.