在iPhone上以横向视图查看我的网页时出现奇怪的字符

Question

在Chrome，Firefox和Safari桌面上查看我的React应用时，页面会按预期显示：

在iPhone上以纵向模式查看时，它甚至正常显示：

然而，当在横向模式下在同一个iPhone上观看时，我看到两段之间有一个奇怪的“å”字符：

我在多个iPhone以及我的XCode iPhone模拟器上重现了这个问题。使用Safari的DOM检查器，我复制了由iPhone模拟器渲染的DOM，代码如下所示：

    <p class="publication-detail__answer-text">My entire career—from creating a second-chance high school to running an educational facility on Riker’s Island—has been focused on working with young people who haven't necessarily succeeded in school. In my experience, the facilities that are the most successful in helping young people meet their goals are the ones that hire specially trained facilitators. Often called peer counselors, advocate coaches, or house mothers and fathers, these professionals provide very different functions from guidance counselors or social workers. 

 By sharing their own experiences and struggles, peer coaches develop bonds of trust with young people facing real challenges. They serve as role models, and demonstrate to kids that they can take charge of their own lives, even when they think they might not be capable. I frequently met these types of coaches in 12-step programs, anti-recidivism programs, and group homes for emancipated foster youth, but was surprised that I rarely encountered them in schools.

/* Much more text */
 </p>

我注意到两个段落之间有多个空白字符，所以我将它们复制到ASCII转换器中并得到“0x200x0a0x0a0x20”。我相信这是相关的，但我很困惑，因为W3schools.com告诉我，UTF-8相当于“å”是“％C3％A5”。

呈现段落的React组件如下所示。请注意，组件的相关部分是

标记：

const PublicationDetailViewQuestionAnswer = React.createClass({
  render: function () {
    return (
        <div className="publication-detail__main-column__question-answer">
          <h3 className="publication-detail__question-text">{this.props.question}</h3>
          <p className="publication-detail__answer-text">{this.props.answer}</p>
        </div>
    );
  }

});

export default PublicationDetailViewQuestionAnswer;

我申请此课程的唯一CSS如下：

.publication-detail__answer-text {
  white-space: pre-wrap;
}

我确实看到一个空格字符以及两段之间的换行符，但我没有在DOM中看到任何可疑字符。我不仅想知道为什么这首先出现，而且还想知道为什么它只出现在横向模式中以及如何确保它根本不出现。

编辑：React组件由带有MySQL数据库的Rails应用程序提供，

标签内的文本使用Rails表单与Simple Form gem一起捕获，默认设置在database.yml文件中看起来像这样：

default: &default
  adapter: mysql2
  encoding: utf8mb4
  collation: utf8mb4_bin
  username: <%= ENV['RDS_USERNAME'] %>
  password: <%= ENV['RDS_PASSWORD'] %>
  socket: /tmp/mysql.sock
  host: <%= ENV['RDS_HOSTNAME'] %>
  pool: <%= ENV["DB_POOL"] || ENV['MAX_THREADS'] || 5 %>
  checkout_timeout: <%= ENV["DB_CHECKOUT_TIMEOUT"] || 5 %>

编辑＃2：当我打开Rails控制台并输出文本时，我看到“\ r \ n \ r \ n”（即空格和2“回车+换行符”组合）将2段分开。但是，同样的模式也会分隔每个段落，但我只看到第一段和第二段之间的奇怪字符。