TV浏览器大屏显示问题

作者在开发过程中遇到TV大屏浏览器的显示问题,如谷歌、Edge的不稳定和UC浏览器的卡顿。通过JavaScript实现全屏切换和Odoo导航栏的隐藏显示,最终选择火狐并找到兼容解决方案。
摘要由CSDN通过智能技术生成

TV浏览器大屏显示问题

最近用OWL做了一个大屏,放在安卓电视上展示,测试了很多android浏览器,效果不太尽人意:
1、安卓版谷歌 ,不稳定,经常崩溃。
2、安卓版Edge,不稳定,莫名奇妙退出。
3、UC浏览器,非常卡顿,反应慢的要死。
4、飞视浏览器,号称是专门为TV定做的浏览器,打开odoo页面报错,可能是内核太老了。
5、火狐,测试下来,还是火狐比较稳定,可惜有一点,不能全屏展示。

最终决定使用安卓版火狐,但是要解决全屏展示的问题,既然软件上没有这个功能,那么通过js是否可用控制呢? 一番折腾之后,找到了解决方案

     toggleFullScreen() {
          if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen();
            $(".o_main_navbar").hide();
          } else {
            if (document.exitFullscreen) {
              document.exitFullscreen();
              $(".o_main_navbar").show();
            }
          }
    }

在大屏右上角不起眼的地方做了一个图标,用来切换大屏,并且测试了一下兼容性,PC版的谷歌、火狐、edge都支持。 除了全屏显示外,odoo的导航栏也一块做了显示和隐藏。
在这里插入图片描述
完美解决了TV浏览器大屏显示的问题。

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
大屏显示的CCS模板是一种基于Cascading Style Sheets(层叠样式表)的设计模板,用于创建具有大尺寸显示屏的网页或应用程序界面。这种模板可以帮助设计师和开发人员轻松地创建适用于大屏幕设备的用户界面,以展示更多的信息和增强用户体验。 大屏显示的CCS模板通常包含以下几个关键特点和设计原则: 1. 响应式设计:CCS模板可以根据不同的屏幕尺寸和分辨率自动调整页面布局和元素大小,确保在大屏幕上显示的内容合理、清晰且易于阅读。 2. 分栏布局:通过将页面内容分成若干列,CCS模板可以在大屏幕上有效地展示更多的信息。这种分栏布局可以根据视觉层次和内容优先级来进行灵活调整,以提高可视化效果。 3. 图标和图形优化:大屏显示通常需要更高分辨率和清晰度的图标和图形元素。CCS模板会优化这些元素,使其在大屏幕上呈现出更好的视觉效果和细节。 4. 导航和交互设计:CCS模板会针对大屏幕上的导航和交互进行优化,以便用户更容易地浏览和操作页面内容。例如,可以采用更大的按钮和菜单,以及更明显的指示器和滚动条等。 5. 提供可定制性:CCS模板可以允许用户根据自己的需求进行个性化定制。用户可以调整颜色、字体、布局等方面的参数,以创建适合自己品牌或风格的大屏显示界面。 综上所述,大屏显示的CCS模板是一种专为大屏幕设备设计的网页或应用程序界面模板。通过响应式设计和优化布局等方式,这种模板可以帮助设计师和开发人员创建适合大屏显示的用户界面,提供更好的用户体验和信息展示效果。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值