相关疑难解决方法(0)

问题出现在Chrome/Android以及其他移动设备上的Chrome上.到目前为止,我只能在Nexus 5x上进行测试.我正在使用Handlebars.js动态显示段落标记内的引号.每当显示的引号少于三行时,font-size会缩小.我很难调试这个字体大小调整问题,因为它似乎只发生在Chrome for Mobile上.该问题不会在Chrome开发工具响应模式中复制.在IOS Safari或Firefox Mobile 中不会发生字体大小调整.

如果您在移动设备上安装了Chrome,那么您是否可以浏览游戏并查看是否发现了问题？链接在这里

这是一个显示字体大小变化的视频:问题视频

这是两张并排的图片,用于说明问题.左图中的字体比右图中的字体大:

以下是该站点该部分的代码(链接到存储库):

#game-screen {
  margin-top: 2%;
  @media (max-width: 550px) {
    margin-top: 4%;
  }
  #game-quotes {
    width: 90%;
    margin: 0 auto;
    @media (max-width: 550px) {
      width: 95%;
    }
    p {
      font-size: 3.6rem;
      @media (max-width: 750px) {
        font-size: 2.4rem;
      }
      @media (max-width: 550px) {
        font-size: 1.4rem;
      }
    }
  }
}

Run Code Online (Sandbox Code Playgroud)

<div id="game-screen">
  <div id="game-pictures">
  </div>
  <div id="game-quotes">
    <h6 class="center">Quote {{counter}}/10</h6>
    <p>"{{content}}"</p>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

有没有人知道可能导致这种字体大小调整的原因？ …

html css android google-chrome responsive-design

Joe*_*ing

2019 11-07

17
推荐指数

2
解决办法

1037
查看次数

根据Android Chrome上的字体大小调整图像大小

我正在根据字体大小调整图像大小，以根据文本大小更改图像大小，但是结果与macOS和Android（两者均与Chrome相比）截然不同。

在桌面版Chrome上：

在Android的Chrome上：

您可以看到，与文本相比，Android上的图像要小得多。如何解决，使图片比Android上的文字大2.5？

看起来像GitHub页面有问题吗？

https://s999inf.github.io/imagezoom/

https://github.com/s999inf/imagezoom/blob/master/index.html

<!DOCTYPE html>
<html>
<head>

<style>
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.logos > img {
    display: inline-block;
    height: 100vh;
    max-height: 5em;
}
.test-logos {
    display: inline-block;
}
.test-logos__img-2em {
    height: 2em;
}
.test-logos__img-3em {
    height: 3em;
}
.test-logos__img-5em {
    height: 5em;
}
</style>

</head>

<body>
copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy …

Run Code Online (Sandbox Code Playgroud)

html javascript css cross-platform google-chrome

Rah*_*ahn

2019 09-30

6
推荐指数

1
解决办法

165
查看次数