html - 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 上都是合适的数量。