Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(website): add meta for charset and responsive web #8412

Closed
wants to merge 1 commit into from

Conversation

fzn0x
Copy link

@fzn0x fzn0x commented Apr 9, 2024

📝 Description

those lines of code are quite important in the context of HTML and web development for ensuring proper behavior and appearance of web pages across different devices and browsers.

<meta charset="utf-8" />: This line specifies the character encoding for the HTML document. UTF-8 is a universal character set that includes virtually all characters and symbols from all writing systems around the world, plus many technical symbols. Using UTF-8 prevents issues with non-ASCII characters (like those in languages other than English or special characters) appearing incorrectly on the web page.

<meta name="viewport" content="width=device-width, initial-scale=1" />: This line is crucial for making web pages mobile-friendly. It tells the browser to match the width of the page to the screen-width of the device (which varies significantly between devices like phones, tablets, and desktops) and to start with a zoom level of 1 (no zoom). This is essential for responsive web design, ensuring that your site looks good on all devices by allowing pages to render properly according to the device's screen size.

In summary, including these meta tags in the section of your HTML document is considered best practice for modern web development. They play a key role in ensuring that your web pages are accessible, readable, and visually consistent across different browsers and devices.

⛳️ Current behavior (updates)

Those lines is not included in the website example.

          <meta charSet="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />

🚀 New behavior

Include new lines for meta tags in remix-guide example.

those lines of code are quite important in the context of HTML and web development for ensuring proper behavior and appearance of web pages across different devices and browsers.

<meta charset="utf-8" />: This line specifies the character encoding for the HTML document. UTF-8 is a universal character set that includes virtually all characters and symbols from all writing systems around the world, plus many technical symbols. Using UTF-8 prevents issues with non-ASCII characters (like those in languages other than English or special characters) appearing incorrectly on the web page.

<meta name="viewport" content="width=device-width, initial-scale=1" />: This line is crucial for making web pages mobile-friendly. It tells the browser to match the width of the page to the screen-width of the device (which varies significantly between devices like phones, tablets, and desktops) and to start with a zoom level of 1 (no zoom). This is essential for responsive web design, ensuring that your site looks good on all devices by allowing pages to render properly according to the device's screen size.

In summary, including these meta tags in the <head> section of your HTML document is considered best practice for modern web development. They play a key role in ensuring that your web pages are accessible, readable, and visually consistent across different browsers and devices.
Copy link

changeset-bot bot commented Apr 9, 2024

⚠️ No Changeset found

Latest commit: 4657654

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

vercel bot commented Apr 9, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
chakra-ui-storybook ✅ Ready (Inspect) Visit Preview Apr 9, 2024 7:04pm
chakra-ui-website ❌ Failed (Inspect) Apr 9, 2024 7:04pm

@segunadebayo
Copy link
Member

segunadebayo commented May 8, 2024

This has been fixed in the meta settings of the remix guide

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants