字体大小：计算仅适用于某些页面/浏览器，即使带有前缀

问题描述

我正在为一家公司的主要网站工作，出于隐私原因，我不会透露该网站。该站点的桌面版本运行良好，一切都应该是关于标记、功能、演示和向后兼容性。出于某种原因，移动到移动设备上，弄乱了 CSS 的字体大小 calc() 功能，因此几乎每个页面似乎都有默认的不变字体大小，无法缩放。似乎只有登陆页面/index.html 被适当地“链接”到在所有页面之间共享的样式表。我尝试过更改边距、填充等。我也尝试过使用不同的浏览器（Safari、Firefox Android、Google Chrome Android 等）、使用前缀和更改文件位置。我绝对确保网站上所有 15 个页面的文件链接完全相同。我不确定我做错了什么，但这是从该文件为移动设备制作的 CSS 代码。是兼容性问题吗？移动浏览器的默认样式？我相信问题的根源来自这个领域，但我不能确定。如果愿意提供帮助的人认为有必要，我会发布更多代码。我感谢任何能够这样做的人。

谢谢，

贾斯汀

代码：

@media screen and (max-width: 1023px) {
  h1 {
        font-size: -webkit-calc(1rem + 4vw);
    font-size: calc(1rem + 4vw);
  }
  h2 {
        font-size: -webkit-calc(1rem + 3vw);
    font-size: calc(1rem + 3vw);
  }
  h3 {
        font-size: -webkit-calc(1rem + 2.5vw);
    font-size: calc(1rem + 2.5vw);
  }
  header {
    align-items: center;
  }
  input {
        font-size: -webkit-calc(0.3rem + 1vw);
    font-size: calc(0.3rem + 1vw);
  }
  header ul li a {
        font-size: -webkit-calc(0.5rem + 1.1vw);
    font-size: calc(0.5rem + 1.1vw);
  }
    a,address,footer,label,li,p,select,td {
        font-size: -webkit-calc(0.6rem + 1.15vw);
    font-size: calc(0.6rem + 1.15vw);
  }
  .arrow {
    animation: arrowMove 200ms ease-in 0s 1 normal forwards;
  }
  .arrowTwo {
    animation: arrowMoveTwo 200ms ease-out 0s 1 normal forwards;
  }
  #Layer_1_1_ {
        font-size: -webkit-calc(0.8rem + 0.75vw);
    width: calc(0.8rem + 0.75vw);
  }
  #arrow {
        font-size: -webkit-calc(2.25rem + 1.5vw);
    width: calc(2.25rem + 1.5vw);
  }
  #login {
    font-size: 20px;
  }
  #search {
    width: 100%;
    height: 40px;
  }
  #xoutbtn {
    width: 40px;
    padding: 0.4em;
  }
  #login-form *:not(img) {
    width: 100%;
  }
  header ul li {
    display: none;
    font-size: 25px;
    padding: 1em;
  }
  h1,h2,h3 {
    margin: 0.5em auto;
  }
  @keyframes arrowMove {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(90deg);
    }
  }
  @keyframes arrowMoveTwo {
    0% {
      transform: rotate(90deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
}

解决方法

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

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

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