如何为特定WordPress页面调整页面方向适配电视显示，以及解决电视物理竖屏转置后网页可读性问题？

一、可行性说明 #

完全可行！不管是针对单个特定页面，还是全局调整网页适配竖屏电视，都可以通过CSS样式轻松实现，不需要复杂的插件或深度代码修改，操作成本很低。

二、针对特定WordPress页面的调整方法 #

如果你只想让某一个页面适配竖屏电视，按以下步骤操作：

1. 获取目标页面的ID
   登录WordPress后台，打开要调整的页面的编辑界面，查看浏览器地址栏——你会看到类似 https://你的域名/wp-admin/post.php?post=123&action=edit 的链接，其中的123就是这个页面的ID。
2. 添加自定义CSS代码
   进入WordPress后台的「外观」→「自定义」→「额外CSS」（更推荐使用子主题的style.css文件，避免主题更新丢失设置），添加以下代码：

   /* 替换123为你的目标页面ID */
   .page-id-123 {
     /* 根据电视物理旋转方向调整角度：90deg/270deg */
     transform: rotate(270deg);
     transform-origin: center center;
     /* 调整容器尺寸确保内容完整显示 */
     width: 100vh;
     height: 100vw;
     overflow-x: hidden;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-top: -50vw;
     margin-left: -50vh;
   }
   

   注意：如果旋转后内容位置不对，直接调整rotate()里的角度（比如换成90deg），直到符合电视显示需求。

三、全局适配竖屏电视的调整（如需所有页面适配） #

如果希望所有网页都适配竖屏电视，把上面的CSS代码里的.page-id-123换成body即可：

body {
  transform: rotate(270deg);
  transform-origin: center center;
  width: 100vh;
  height: 100vw;
  overflow-x: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50vw;
  margin-left: -50vh;
}

四、额外优化建议 #

• 直接在电视端打开页面预览，实时调整rotate角度和尺寸参数，直到显示完美。
• 如果页面有固定导航栏或弹窗，可能需要单独调整这些元素的样式，避免旋转后错位。
• 可以配合媒体查询，只在大屏竖屏设备上应用样式，减少对其他设备的影响：

  @media screen and (min-width: 1024px) and (orientation: portrait) {
    .page-id-123 {
      /* 这里放上面的旋转样式 */
    }
  }
  

内容的提问来源于stack exchange，提问作者Cem Sayar