如何让Tizen Web应用在三星竖屏电视上全屏显示？

问题背景 #

持有2023款32英寸三星The Frame电视，开发了一款自动循环播放视频的Tizen Web应用，原本仅支持横屏运行。将电视切换为竖屏模式后，应用仅以16:9比例居中显示，调整HTML/CSS设置无效，需通过Tizen JavaScript API或配置调整解决。

原config.xml代码：

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/EvolmApp01" version="1.0.0" height="3840" width="2160" viewmodes="fullscreen">
  <tizen:application id="p8x2vDIuIO.EvolmApp01" package="p8x2vDIuIO" required_version="2.3"/>
  <author href="https://evolm.com">EVOLM</author>
  <content src="index.html"/>
  <description>Live Art</description>
  <feature name="http://tizen.org/feature/screen.size.all"/>
  <icon src="icon.png"/>
  <tizen:metadata key="http://tizen.org/metadata/app_ui_type/base_screen_resolution" value="extensive"/>
  <name>EvolmApp01</name>
  <tizen:profile name="tv-samsung"/>
  <tizen:setting screen-orientation="portrait" context-menu="disable" background-support="enable" encryption="disable" install-location="internal-only" hwkey-event="disable"/>
</widget>

解决方案 #

1. 调整config.xml配置 #

修改配置文件中的分辨率和适配参数，确保系统识别竖屏需求：

• 明确指定竖屏分辨率（32英寸The Frame竖屏为2160×3840）
• 添加强制竖屏、全屏适配的元数据

修改后的config.xml关键部分：

<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/EvolmApp01" version="1.0.0" width="2160" height="3840" viewmodes="fullscreen">
  <!-- 保留原有其他配置项 -->
  <tizen:metadata key="http://tizen.org/metadata/app_ui_type/base_screen_resolution" value="portrait"/>
  <tizen:metadata key="http://tizen.org/metadata/fullscreen" value="true"/>
  <tizen:setting screen-orientation="portrait" force-orientation="portrait" context-menu="disable" background-support="enable" encryption="disable" install-location="internal-only" hwkey-event="disable"/>
</widget>

说明：force-orientation强制应用锁定竖屏，base_screen_resolution设为portrait让系统优先适配竖屏分辨率。

2. 使用Tizen JavaScript API动态适配屏幕 #

通过Tizen系统信息API获取当前屏幕参数，强制调整应用窗口尺寸匹配竖屏：

// 触发Tizen环境初始化
window.addEventListener('tizenhwkey', function() {});

document.addEventListener('DOMContentLoaded', function() {
  if (typeof tizen !== 'undefined') {
    // 获取屏幕分辨率信息
    tizen.systeminfo.getPropertyValue('DISPLAY', function(display) {
      const screenWidth = display.resolutionWidth;
      const screenHeight = display.resolutionHeight;
      
      // 强制应用窗口匹配屏幕尺寸
      window.resizeTo(screenWidth, screenHeight);
      
      // 同步设置页面根元素尺寸
      document.documentElement.style.width = `${screenWidth}px`;
      document.documentElement.style.height = `${screenHeight}px`;
      document.body.style.width = `${screenWidth}px`;
      document.body.style.height = `${screenHeight}px`;
      
      // 调整视频元素铺满屏幕
      const video = document.querySelector('video');
      if (video) {
        video.style.width = '100%';
        video.style.height = '100%';
        video.style.objectFit = 'cover';
      }
    }, function(error) {
      console.error('获取屏幕信息失败:', error);
    });
  }
});

3. 配合CSS强制全屏显示 #

在index.html的样式中添加以下代码，确保内容无空隙铺满屏幕：

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

关键注意事项 #

• 确保Tizen Studio项目的tv-samsung配置版本不低于2.4（部分竖屏适配API在低版本不支持）
• 测试需在实际电视设备上进行，模拟器无法完全模拟The Frame的竖屏行为
• 若仍存在黑边，检查电视系统的「屏幕适配」设置，关闭「保持宽高比」选项

内容的提问来源于stack exchange，提问作者Tyler Davis