使用Create React App制作的非响应式网站 - 显示在移动设备上放大的页面

Question

问题的背景 - 我正在使用create react app node package manager创建一个简单的HTML登录页面。 当我试图让网站移动友好时，我开始遇到问题。

具体问题 - 当我检查create react app公共文件夹时，我看不到视口元标记有什么问题，它应该是。这是另一个屏幕截图。

当我在手机上打开网站时，它会放大并且背景颜色不成比例。我猜它正在发生，因为视口元数据无法正确呈现。

任何具有反应和CSS技能的人都能够弄清楚是什么导致这种情况发生。我附上了下面问题的GIF。

link two

我需要帮助修复使用Reacts scaffolded＆＃39; Create react application＆＃39;创建的目标网页的视口元数据。

我正在尝试使网站移动设备友好，但我面临以下问题。请在浏览器中的移动设备或移动模拟模式下加载以下链接。

http://sagarmunjal.github.io/learnreactjs

此外，页面调整大小时。我想学习如何根据调整大小的窗口调整文本大小/调整。

代码可在主分支处获得。 https://github.com/sagarmunjal/learnreactjs.git

任何解决方案都受到高度赞赏。

Answer 1

Your .Hero-h1 has a font size of 3.5em which is making the title stretch outside of the page making it bigger than it should be. This might be a problem with more of your layout.

I suggest you look into media queries if you want to make a responsive website. Here is a good article on the subject: https://css-tricks.com/css-media-queries/