Which meta to be used for viewport

[megri]

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, viewport-fit=cover”>
    <meta content="initial-scale=1, minimum-scale=1, width=device-width" name="viewport">

Key differences:

• viewport-fit=cover: This attribute is used in the first option to ensure that the content is scaled to cover the entire viewport, even if it means being clipped. This is useful for mobile devices with notches or rounded corners.

• minimum-scale=1: This attribute in the second option sets the minimum zoom level to 1, preventing users from zooming out further.

[megri]

Recommendation:
Use the first option:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

Reasons:

• viewport-fit=cover provides better handling for mobile devices with unique screen shapes.

• initial-scale=1.0 is sufficient for most cases, and minimum-scale=1 can be restrictive.

• The first option is more concise and combines essential viewport settings.

Note:

• Make sure to include only one viewport meta tag in your HTML head.

• Order of attributes doesn't matter, but consistency is recommended.

By choosing the first option, you'll ensure a responsive design that adapts well to various devices and screen types.

[megri]

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">

Explanation:

• X-UA-Compatible: Specifies Internet Explorer compatibility mode.

• meta charset="UTF-8": Declares document character encoding.

Redundant tag:
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8">
This tag is replaced by the more concise <meta charset="UTF-8"> in HTML5.
Why remove it:

• Duplicate information

• HTML5 recommends meta charset for character encoding

• Improved readability and conciseness

Best Practice:
Use the two essential meta tags:
This combination ensures:

• Compatibility with older Internet Explorer versions

• Proper character encoding for text rendering