多端 · 网页版说明

黄果视频多端浏览

这一页只讲一件事:同一套网页在不同屏幕上长什么样。 没有安装步骤,也没有需要设置的选项——打开就是能逛的样子,换设备时看到的仍是同一份剧单。

APP 暂未开放下载,推荐直接使用网页版。网页版不需要登录,也不需要安装,手机浏览器里打开就能翻阅全部剧目。
  • 手机浏览

    竖屏比例本来就适合手机。首页的每个栏目是一排可以左右滑动的海报,右边会露出半张,提示还能往右翻;栏目链接固定成一行,直接点就行,不用展开菜单。

    • · 海报横排可手指滑动
    • · 栏目链接常驻一行
    • · 按钮与可点区域不小于 44px
  • 平板浏览

    屏幕宽一些之后,剧目列表从两列变成三到四列,热剧专区的横幅会站得更高,封面的细节也更清楚。横屏时看时间线式的上线记录会比较省力。

    • · 列表三到四列
    • · 横幅高度自适应
    • · 横竖屏都会重新排布
  • 电脑浏览

    短剧电脑版把内容控制在 1280px 宽,首屏是一组大小不一的便当格:左边一大格放本周主推,右边四小格放同时段的热剧。片库与各专区的每一排正好放满六部,不会出现半排的空格。

    • · 内容最大宽度 1280px
    • · 首屏便当格布局
    • · 每排恰好六部

排版是怎么适配的

同一份内容,三种排法。规则写死在这里,换设备时不会有内容被藏起来。

首屏

宽屏是「左一大格 + 右四小格」,窄屏改成「大格在上、四小格两两并排」。 两种排法用的是同一份封面与文案,主推剧不会因为屏幕小就消失。

栏目与筛选

栏目链接在窄屏变成一行可以左右滑的胶囊,一直留在页头下面;题材筛选同样是胶囊, 点一下只在当前页面换内容,不会跳走。

海报与文字

封面统一按宽 3 高 4 的竖版比例裁剪,不拉伸;剧名超过两行就截断加省略号, 卡片高度因此能对齐,翻页时不会跳。