FirefoxOS横竖屏切换应用开发一般方法总结

 

结论：目前Firefoxos已经支持横竖屏自动切换，前提是：手机支持orientationsensor

具体的实现方式如下：

1、一般情况下，在我们开发的应用在没有对横竖屏切换开发做任何设置或者限制的情况，默认是支持横竖屏切换的，并且使用的是同一套css布局，当然，为了适应横屏和竖屏下的不同效果和布局，我们可以在css布局中使用以下方法规定和定义相应的布局；

2、在布局文件中使用@media 可以检测屏幕方向同时切换布局（@media功能相当强大，包括多分辨率支持目前也可以靠它实现，这里只介绍和横竖屏切换相关的使用）。

在CSS文件中使用@media （orientation：landscape）、@media （orientation：portrait）

@media(orientation: landscape) {

                     //横屏的布局的相关代码在此定义

}

 

@media(orientation: portrait) {

  //竖屏的布局代码在此定义

}

     如果我们有一些属性和布局对横竖屏都适用，就直接写在这两个之外的部分即可。

     也可以在此html文件中引入横竖屏的布局文件（推荐），代码如下：

     

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

3、某些特殊的应用不需要实现横竖屏切换而只在一个方向布局（如有些游戏只固定在横屏，不切换到竖屏），这时我们需要在我们应用中的manifest.webapp文件中添加一个属性：

"orientation": "portrait-primary"  //表示固定在竖屏，不支持横屏切换，这种情况即时定义了横屏布局也不会生效

"orientation": "landscape-primary"   //表示固定为横屏，不支持竖屏切换

4、以上是firefox os app横竖屏开发的一般方法。

注意：若更改过manifest.webapp文件，不要忘记把这个文件部署到/data/local/webapps/xxx.gaiamobile.org