一、前言
現在機頂盒開發規範中涉及到的高清業務一般需要設置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標籤，佈局就可以完全按照給定的尺寸進行排版了。