EPG机顶盒上对page-view-size的理解

最新推荐文章于 2023-03-11 13:46:13 发布

Developeryang

最新推荐文章于 2023-03-11 13:46:13 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签： html js css

本文链接：https://blog.csdn.net/m0_37781149/article/details/106574458

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、前言

现在机顶盒开发规范中涉及到的高清业务一般需要设置meta标签:

 <meta name="page-view-size" content="1280*720">

最开始的时候对这个标签也是一知半解的，后来自己慢慢测试，将相应的理解记录如下。

二、机顶盒分辨率

浏览器对于 IPTV 业务的分辨率支持应区分标清及高清两种：

标清业务来说，终端浏览器在电视机的 PAL 制下应支持 644×534 的分辨率，浏览
器对于 EPG 页面显示分辨率为 640×530；
对于高清业务来说，终端浏览器在采用高清输入时应至少支持 1280×720 的分辨
率。

对于标清及高清业务来说，浏览器应该能够应用【附录 A】中给出的 CSS 对于页面整
体显示布局进行设置。同时，终端浏览器在分辨率确定的情况下进行页面整体或页面元素的
显示过程中符合以下原则：

若页面未设置 bgcolor 属性的，则浏览器底色默认显示为黑色；
若页面将 body 中的 leftmargin、topmargin、marginwidth、marginheight 等元素
设置为 0，则浏览器将紧贴屏幕上方及左侧显示页面；
若页面上的元素采用 CSS 的 absolute 进行 style 定义时，浏览器应从页面大小
640×530 或 1280×720 分辨率下的左上角（0，0）作为元素显示位置计算的起点；
若 EPG 页面元素未采用 CSS 的 absolute 进行 style 定义时，浏览器则基于基本
CSS 再计算实际的位置作为起点进行页面元素的编排；
尽管许多屏幕分辨率被调成 4:3，但是有些电视可能宽或窄一些。当为支持这些分
辨率调整时，终端会在边缘加入一些额外的空，使用黑色填充；对于标清页面来
说，若屏幕分辨率为 16：9，那么终端在显示时会将画面置中，其余区域使用黑
色填充。
终端浏览器在高清 EPG 和标清 EPG 之间应进行平滑切换，在 EPG 页面上 head
中增加 meta 通知浏览器当前页面的大小：

1.高清 EPG 页面应填写 < meta name=”page-view-size” content=”1280*720” />

2标清 EPG 页面应填写： < meta name=”page-view-size” content=”640*530” />

3浏览器一旦在某页面中检测到以上 META 信息后，将保持此页面的分辨率显
示状态，即当后续页面无 META 标识时自动按照之前的分辨率进行显示；

上面介绍那么多的分辨率，其中最核心的就是第三条

三、验证1280*720

先来验证1280*720的（我这边是用天邑机顶盒验证的）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="page-view-size" content="1280*720">
    <title>test</title>
</head>
<body style="padding: 0;margin: 0;background-color: red;width: 100%;height: 100%">

<div style="position:absolute;background: yellow;width: 100px;height: 100px;top: 620px;left: 1180px;"></div>
<div style=" width:88%;margin:30px auto; color:black;" id="div_html"></div>

<script>
    var s = "";
    s += " 网页可见区域宽：" + document.body.clientWidth + "<br />";
    s += " 网页可见区域高：" + document.body.clientHeight + "<br />";
    s += " 网页可见区域宽：" + document.body.offsetWidth + " (包括边线和滚动条的宽)" + "<br />";
    s += " 网页可见区域高：" + document.body.offsetHeight + " (包括边线的宽)" + "<br />";
    s += " 网页正文全文宽：" + document.body.scrollWidth + "<br />";
    s += " 网页正文全文高：" + document.body.scrollHeight + "<br />";
    s += " 网页被卷去的高(ff)：" + document.body.scrollTop + "<br />";
    s += " 网页被卷去的高(ie)：" + document.documentElement.scrollTop + "<br />";
    s += " 网页被卷去的左：" + document.body.scrollLeft + "<br />";
    s += " 网页正文部分上：" + window.screenTop + "<br />";
    s += " 网页正文部分左：" + window.screenLeft + "<br />";
    s += " 屏幕分辨率的高：" + window.screen.height + "<br />";
    s += " 屏幕分辨率的宽：" + window.screen.width + "<br />";
    s += " 屏幕可用工作区高度：" + window.screen.availHeight + "<br />";
    s += " 屏幕可用工作区宽度：" + window.screen.availWidth + "<br />";
    s += " 你的屏幕设置是 " + window.screen.colorDepth + " 位彩色" + "<br />";
    s += " 你的屏幕设置 " + window.screen.deviceXDPI + " 像素/英寸" + "<br />";

    document.getElementById("div_html").innerHTML = s;
</script>
</body>
</html>

上面设置了一个100*100的黄色背景块儿的，我们把它定位在右下角，添加了top: 620px;left: 1180px;属性。
在这里插入图片描述
可以看到网页正文宽高是1280 * 720。

四、验证640*530

这边也是用天邑机顶盒验证的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="page-view-size" content="640*530">
    <title>test</title>
</head>
<body style="padding: 0;margin: 0;background-color: red;width: 100%;height: 100%">

<div style="position:absolute;background: yellow;width: 100px;height: 100px;top: 430px;left: 540px;"></div>
<div style=" width:88%;margin:30px auto; color:black;" id="div_html"></div>

<script>
    var s = "";
    s += " 网页可见区域宽：" + document.body.clientWidth + "<br />";
    s += " 网页可见区域高：" + document.body.clientHeight + "<br />";
    s += " 网页可见区域宽：" + document.body.offsetWidth + " (包括边线和滚动条的宽)" + "<br />";
    s += " 网页可见区域高：" + document.body.offsetHeight + " (包括边线的宽)" + "<br />";
    s += " 网页正文全文宽：" + document.body.scrollWidth + "<br />";
    s += " 网页正文全文高：" + document.body.scrollHeight + "<br />";
    s += " 网页被卷去的高(ff)：" + document.body.scrollTop + "<br />";
    s += " 网页被卷去的高(ie)：" + document.documentElement.scrollTop + "<br />";
    s += " 网页被卷去的左：" + document.body.scrollLeft + "<br />";
    s += " 网页正文部分上：" + window.screenTop + "<br />";
    s += " 网页正文部分左：" + window.screenLeft + "<br />";
    s += " 屏幕分辨率的高：" + window.screen.height + "<br />";
    s += " 屏幕分辨率的宽：" + window.screen.width + "<br />";
    s += " 屏幕可用工作区高度：" + window.screen.availHeight + "<br />";
    s += " 屏幕可用工作区宽度：" + window.screen.availWidth + "<br />";
    s += " 你的屏幕设置是 " + window.screen.colorDepth + " 位彩色" + "<br />";
    s += " 你的屏幕设置 " + window.screen.deviceXDPI + " 像素/英寸" + "<br />";

    document.getElementById("div_html").innerHTML = s;
</script>
</body>
</html>

上面设置了一个100*100的黄色背景块儿的，我们把它定位在右下角，添加了top: 430px;left: 540px;属性即可。
在这里插入图片描述
可以看到网页正文宽高是640 * 530。

五、结论

后期我们进行EPG页面制作的时候，可以按照1280*720这个尺寸来切图，然后添加对应的meta标签，布局就可以完全按照给定的尺寸进行排版了。

Developeryang

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
EPG机顶盒上对page-view-size的理解

EPG机顶盒上对< meta name=“page-view-size” content=“1280*720”>的理解一、前言现在机顶盒开发规范中涉及到的高清业务一般需要设置meta标签: <meta name="page-view-size" content="1280*720"> 最开始的时候对这个标签也是一知半解的，后来自己慢慢测试，将相应的理解记录如下。二、机顶盒分辨率浏览器对于 IPTV 业务的分辨率支持应区分标清及高清两种：标清业务来说，终端浏览器在电视
复制链接

扫一扫

专栏目录