javascript - 在移动设备中使用字体大小时圆形改变半径

Question

我正在使用圆形 ( https://circletype.labwire.ca/ ) 文本圆，它适用于桌面，但在移动设备上首先显示默认字体大小，当我刷新浏览器时，它会显示我的实际字体大小。

例如:如果我第一次在移动设备上查看，它会显示默认字体大小。如果我刷新浏览器，它会显示实际的字体大小。

如果我在媒体查询中设置字体大小，那么它会改变半径和文本。

桌面

默认字体大小

当我刷新浏览器时

$(document).ready(function() {
  new CircleType(document.getElementById('header_text_round'))
    .radius(220);
});

  body {
  background-color: #000;
  color: #fff;
}

.header_wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  min-height: 100vh;
}

.header_section {
  height: 100%;
  min-height: 100%;
  width: 100%;
  position: fixed;
  z-index: -1;
}

.banner_bg {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: auto;
  background-position: center;
  min-height: 100%;
}

.header_bg {
  position: relative;
  background-position: center;
}

.header_box_wrapper {
  width: 350px;
  box-sizing: border-box;
  position: absolute;
  top: 22%;
  right: 15%;
  color: #fff;
  transform: translateY(-50%);
}

@media all and (max-width:768px) {
  .mob_header_bg {
    background-image: url("https://lh4.ggpht.com/PbWVvAUJyNT_joymCCwbJCVwvM6JoyV2ogoqhhMT9ZDt4zPjff2Dn0jO8aMDPauwTh4=h900")!important;
  }
  h2#header_text_round {
    color: red !important;
    font-size: 22px !important;
    text-transform: uppercase;
  }
  body .header_box_wrapper {
    width: 100% !important;
    top: 20%;
    right: 0;
  }
}

<div class="header_wrapper">
  <div class="header_section">
    <div class="header_bg banner_bg mob_header_bg"></div>
    <div class="container">
      <div class="header_box_wrapper">
        <div class="header_box">
          <h2 id="header_text_round">Lorem ipsum dolor sit amet</h2>
        </div>
      </div>
    </div>
  </div>
</div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://circletype.labwire.ca/dist/circletype.min.js"></script>

Answer 1

您可以尝试的一个修复方法是更新 vw 中的字体大小。我从 320px 的分辨率检查了这个，它在横向和纵向上看起来都很好，高达 767px。所以像下面这样更新 CSS 并让我知道

h2#header_text_round {
    color: red !important;
    font-size: 5vw !important;
    text-transform: uppercase;
  }

$(document).ready(function() {
  new CircleType(document.getElementById('header_text_round'))
    .radius(220);
});

  body {
  background-color: #000;
  color: #fff;
}

.header_wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  min-height: 100vh;
}

.header_section {
  height: 100%;
  min-height: 100%;
  width: 100%;
  position: fixed;
  z-index: -1;
}

.banner_bg {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: auto;
  background-position: center;
  min-height: 100%;
}

.header_bg {
  position: relative;
  background-position: center;
}

.header_box_wrapper {
  width: 350px;
  box-sizing: border-box;
  position: absolute;
  top: 22%;
  right: 15%;
  color: #fff;
  transform: translateY(-50%);
}

@media all and (max-width:768px) {
  .mob_header_bg {
    background-image: url("https://lh4.ggpht.com/PbWVvAUJyNT_joymCCwbJCVwvM6JoyV2ogoqhhMT9ZDt4zPjff2Dn0jO8aMDPauwTh4=h900")!important;
  }
  h2#header_text_round {
    color: red !important;
    font-size: 5vw !important;
    text-transform: uppercase;
  }
  body .header_box_wrapper {
    width: 100% !important;
    top: 20%;
    right: 0;
  }
}

<div class="header_wrapper">
  <div class="header_section">
    <div class="header_bg banner_bg mob_header_bg"></div>
    <div class="container">
      <div class="header_box_wrapper">
        <div class="header_box">
          <h2 id="header_text_round">Lorem ipsum dolor sit amet</h2>
        </div>
      </div>
    </div>
  </div>
</div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://circletype.labwire.ca/dist/circletype.min.js"></script>