CSS:摆脱文本区域中多余的非填充空间(iPhone iOS 10)

Question

我需要文本区域内的文本看起来与div元素中的文本完全相同，包括填充等。

下面的html适用于我的电脑(Windows Chrome(。但是，当我在实际的iPhone(Safari/Chrome，OS 10(上查看它时，它会在文本区域内增加额外的空间，类似于左填充(但左填充为0(。如何摆脱这个空间？

(我认为我在iOS 9中没有这个问题。

<style>
.my_area{
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: arial;
  font-size:17px;
  line-height:26px; 
  width:200px;
  overflow:hidden;
  background:yellow;
  border:1px solid black;
  border-radius:0;
}
</style>
<textarea class = "my_area">q w e r t y u i o p a s d f g h j k l z x c v b n</textarea>
<br/>
<div class = "my_area">q w e r t y u i o p a s d f g h j k l z x c v b n</div>

编辑：我使用

width=device-width, initial-scale=1.0 

在标题中，所以我正在以适当的移动设备分辨率查看页面。

Answer 1

就像评论所说的那样，看起来没有解决方案。

当它是 iOS 时，我最终为元素添加了 3px 左右填充。这似乎是iPad和iPhone上合适的数量。