Which meta to be used for viewport

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • megri
    Administrator

    • Mar 2004
    • 957

    Which meta to be used for viewport

    Code:
    <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.
    Parveen K - Forum Administrator
    SEO India - TalkingCity Forum Rules - Webmaster Forum
    Please Do Not Spam Our Forum
  • megri
    Administrator

    • Mar 2004
    • 957

    #2
    Recommendation:
    Use the first option:

    Code:
    <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.
    Parveen K - Forum Administrator
    SEO India - TalkingCity Forum Rules - Webmaster Forum
    Please Do Not Spam Our Forum

    Comment

    • megri
      Administrator

      • Mar 2004
      • 957

      #3
      Code:
      <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
      ​​
      Parveen K - Forum Administrator
      SEO India - TalkingCity Forum Rules - Webmaster Forum
      Please Do Not Spam Our Forum

      Comment

      Working...