javascript - 在 firefox os 中使用屏幕方向调整文本区域的大小

Question

我正在尝试为 Firefox OS 创建一个简单的文本编辑器，我使用 testarea 作为用户的文本字段。当我使用模拟器将屏幕方向从纵向更改为横向或反之时，我需要 textarea 自动更改其方向并获得全屏尺寸。但是每次我改变方向我都需要重新加载应用程序:(

如果我尝试 screen.orientation 结果未定义。

下面是我用来获取屏幕尺寸的代码

HTML:

<textarea id="input-text" onfocus="TextareaOnFocus()" onblur="TextareaRealeseFocus()"></textarea>

Javascript:

var textAreaSize = document.getElementById("input-text");
textAreaSize.style.height = screen.height - 74 + "px"; // -74, so that the field is not edge to edge 
textAreaSize.style.width = screen.width - 21 + "px"; // -21, so that the field is not edge to edge 

有什么办法可以改变键盘大小，因为它覆盖了屏幕的一半，所以我的文本文件变得非常小。

Answer 1

只需在 CSS 中设置文本区域的大小，因为我们现在有很酷的东西，例如 calc和 vw/vh .

#input-text {
   height: calc(100vh - 74px);
   width: calc(100vw - 21px);
}

旋转时也会自动工作。

---

screen.orientation 不起作用的原因是目前方向 API 是非标准的，因此您需要在 moz 前缀。 F.e.: screen.mozOrientation 工作正常。