Providing a consistent and optimal user experience across a wide range of devices is a crucial task in webpage design. In the old days, developers would create two different versions of the same webpage, one for desktops and the other for mobile devices.
However, nowadays, electronic devices come with various screen sizes and resolutions, such as smartphones, tablets, laptops, desktops, and even smart TVs. It is impractical to create and maintain so many versions of the same webpage.
Instead, developers would use a new design approach called responsive design, which aims to create webpages that automatically adapt and adjust their layout, content, and functionality based on the device being used to access the webpage.
Responsive design is not a new technology or a programming language. You are still using the same old HTML and CSS we've been talking about. It is a set of best practices you should follow when designing your webpage.
Setting the viewport
The first thing you must do when creating a responsive layout is to add the following <meta> tag in the <head> section of the webpage.
1<meta name="viewport" content="width=device-width, initial-scale=1.0" />When the mobile browser displays a webpage, it will first render the default desktop version and then try to scale the content to fit the screen size. This viewport tag tells the browser how to control the scaling of the page.
The width=device-width attribute sets the width of the viewport to equal to the width of the screen, making sure the content is displayed at the device's actual size. Without it, the webpage may be displayed at the default desktop width.
In some cases, the browser may "lie" about the screen size, especially on high-density screens, which often use multiple physical pixels to represent one digital pixel. This attribute makes sure that the page is scaled correctly across all devices.