在firefox os中调整屏幕方向的textarea大小

时间:2014-09-04 05:22:30

标签: javascript css html5 firefox-os

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

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

我用来获取屏幕尺寸的Bellow代码

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 

是否有任何方法可以更改键盘尺寸,使其覆盖屏幕的一半,因此我的文字变得非常小。

1 个答案:

答案 0 :(得分:0)

只需在CSS中设置textarea的大小,因为我们现在有很酷的东西,例如calcvw/vh

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

旋转时也会自动工作。


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