全屏镀铬显示中的字体较小

编程问答 2022-06-22

问题描述

在我的情况下，Internet Explorer上的HTML可以显示，但是在Google chrome中，字体很小。我很困惑问题是否来自Google Chrome设置或HTML / CSS。

在Internet Explorer中，显示正常。 enter image description here

但是在谷歌浏览器中，字体显得很小。 enter image description here

这是我的HTML。

<!DOCTYPE html>
<html lang="en">
  <head>
      <Meta charset="UTF-8">
      <Meta name="viewport" content="width=device-width,initial-scale=1.0">

      <title>bob BUILDERS.com</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

      <link href="css/style.css" rel="stylesheet"  type="text/css">
  </head>
  <body>
    <!-- Home section -->
    <div class="header" id="Home">
      <div class="container">
          <div class="header-content">
            <h1><span>Construction Services.</span></h1>
            <h1><span>Home Renovation.</span></h1>
            <p>Your statisfaction is our pride.</p>
            </div>
          </div>
      </div>
    </div>
  </body>
</html>

CSS：

    .container
    {
    width: 100%;
    }

    .header{
    background-image: url(../img/MainNew.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;
    height: 100vh;
    }

    .header .header-content
   {
    height: 100vh;
    text-align: left;
    width:100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    }

    .header-content h1
    {
    font-size:40px ;
    font-weight:700;
    margin-bottom: 10px;
    color: #F0FFF0;
    text-shadow: 2px 2px 4px #F0FFF0;
    }

请帮助我。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

displayfont-sizefullscreenfullscreengoogle-chromesettingssettingssettings