UI设计:
机顶盒的输出设备为电视机,电视机的图像重现率比计算机的显示器小,靠近边缘部分的文字与图像可能会在电视机中无法看到,所以在进行应用界面设计时,文字与图像尽量设计在屏幕中间的部位。为了保证页面上的内容可以完全显示在电视机上,需要设置一个安全显示区域。各种型号的电视机,其重现率都是不同的,因此对于安全显示区没有固定的大小,推荐的安全显示区域分辨率为1120×620,即左右各保留80,上下各保留50。
1. 机顶盒浏览器的显示分辨率是1280×720像素。
2. 设计图 上下各保留25px,左右各保留40px的距离,不再安全显示距离的范围内摆放元素。
CSS样式:
机顶盒支持基础的CSS样式属性和派生选择器,例如:margin, padding, float, position, line-height等,各厂商对于基础样式属性的渲染差异性也不大。
不支持的CSS样式列表(这里只列举在PC平台浏览器上常用的CSS属性):
1. 伪类,例如: ":active", ":focus", ":visited"等。机顶盒上使用的是遥控器,所以鼠标悬停之类的行为无效。
2. min-width/height, max-width/height 设置元素最大/最小宽带/高度的属性,无效。
3. display: inline, list-item, table等,不建议使用。各厂商中间件渲染差异非常大。
4. z-index,无效。
CSS3和动画效果:
在支持上各厂商偏差较大,由于机顶盒属弱终端类型(硬件资源弱)&