对移动设备上的选框横幅文本大小调整错误进行故障排除

Question

我在我的网站上实现了以下滚动字幕横幅，它在桌面上完美运行，但是在移动设备上它将正确加载一秒钟，然后文本随机调整大小并在顶部被裁剪掉。我猜它一定与它撞到轨道上的某个东西有关，但我不知道如何解决它。

Here is the full code:<style>
  .custom-marquee {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 35px;
    overflow-x: hidden;
    z-index: 100;
    background:{{section.settings.colorBackground}}; 
    color:{{section.settings.colorText}}; 
  }
  .custom-marquee a {
    color:{{section.settings.colorText}}; 
  }
  .custom-marquee .track {
      position: absolute;
      bottom: 5px;
      white-space: nowrap;
      will-change: transform;
      animation: marquee 11s linear infinite;
      font-size: 1.3rem;
  }
  .custom-marquee .content {
    margin-left: 40px;
  }
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-20%);
    }
  }
</style>
  <div class="custom-marquee " role="region" {{ block.shopify_attributes }}>
    {%- if section.settings.text != blank -%}
      {%- if section.settings.link != blank -%}
        <a href="{{ section.settings.link }}" class="">
      {%- endif -%}
          <div class="track ">
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            {%- if section.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          </div>
          {%- if section.settings.link != blank -%}
        </a>
      {%- endif -%}
    {%- endif -%}
  </div>
<script>
var marquees = document.getElementsByClassName("marquee-text");
for (let i = 0; i < marquees.length; i++) {
   // console.log(marquees.item(i));
  let str = marquees.item(i).innerHTML;
  let improvedText = str.replaceAll("|", "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;")
  console.log(improvedText)
  marquees.item(i).innerHTML = improvedText
}
</script>
{% schema %}
{
  "name": "Marquee Announcement",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "default": "Black Friday Sale | Save up to 75% off storewide",
      "label": "Add text to display"
    },
    {
      "type": "color",
      "id": "colorBackground",
      "label": "Background color",
      "default": "#B2FCE4"
    },
    {
      "type": "color",
      "id": "colorText",
      "label": "Text color",
      "default": "#000"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    }
  ]
}
{% endschema %}

提前非常感谢您的帮助！

我看了一下代码，但无法弄清楚。

Answer 1

通过在 HTML 中设置视口元标记来确保响应式设计。实施 CSS 媒体查询来调整较小屏幕的样式。检查选取框容器的溢出属性并使用相对字体大小单位（如 em）以获得更好的移动适应性。跨各种设备进行测试，以识别并解决任何剩余的文本调整大小问题。