设备适配

设备适配与 pg网页版 跨端使用指引

桌面端、平板与手机三类设备的显示差异与操作方式,按屏幕尺寸与输入方式给出对应说明,方便按手边设备逐项核对。

3 类常用设备覆盖
16:9画面比例参考
横竖屏自动重排布局

适配要点概览

浏览器环境

Chrome、Edge、Safari、Firefox 等现代浏览器均可打开,建议保持版本更新。

屏幕尺寸

1280×720 及以上分辨率显示完整内容,窄屏自动收起侧栏改为单列。

输入方式

鼠标、触控与键盘的操作路径各自对应,按钮与列表间距按输入方式调整。

网络条件

常规宽带与移动网络下内容加载顺序一致,流量节省模式下自动降低封面图清晰度。

三类设备的显示与操作差异

同一套页面在不同屏幕与输入设备上会重新排布元素位置,下面按桌面端、平板与手机分别说明界面结构变化。

pg网页版 在桌面端浏览器中的分栏显示效果
设备类别一

桌面端浏览器适配

桌面端以 1280×720 及以上分辨率显示完整内容,主操作区居中排布,功能入口按使用频率从左到右排列。窗口宽度低于 1024px 时侧栏自动收起为图标条,拖拽分屏或缩放窗口后布局会即时重算,无需手动刷新页面。

Windows macOS Chrome Edge Safari 分屏窗口
查看桌面端操作要点 →
pg网页版 在平板触控设备上的横屏布局
设备类别二

平板与触控设备适配

平板设备按触控操作重新排布按钮间距,可点击区域不小于 44×44px,减少误触概率。横屏时内容区两侧留白增加,竖屏自动切换为单列纵向滚动;连接外接键盘后可用快捷键切换栏目,手势滚动与页面滚动条保持同步。

iPadOS Android 平板 触控手势 横屏布局 外接键盘
了解触控下的功能入口 →
pg网页版 在手机端的单列纵向页面效果
设备类别三

手机端移动访问

手机端默认单列布局,顶部导航收进抽屉菜单,主要内容按纵向顺序排列。下拉即可刷新列表,图片按屏幕宽度等比缩放,数据列表改为卡片堆叠展示;开启流量节省模式后自动降低封面图清晰度,页面结构与操作路径保持不变。

iOS Android 竖屏单列 下拉刷新 流量节省
查看手机端显示设置 →

跨设备使用的四个步骤

从确认设备环境到保存显示偏好,按顺序完成即可在多种设备上获得一致的浏览结构。

1

确认设备与浏览器

在浏览器标识信息中查看版本号,确认系统与浏览器均处于较新状态。

2

打开 pg网页版 页面

输入地址后等待首屏加载完成,页面会自动识别屏幕宽度并选择对应布局。

3

调整显示密度

按可读性调整字号与列表间距,窄屏设备建议保持默认的紧凑排列方式。

4

保存并同步偏好

保存设置后再次打开页面将沿用上次的布局参数,换设备时重新确认一次即可。

设备参数对照

下表列出三类设备在分辨率、布局形态、输入方式与侧栏表现上的常见参考值,实际效果以当前系统与浏览器为准。

三类设备的参数对照表
对比项 桌面端 平板 手机
建议分辨率 1280×720 及以上 1024×768 及以上 360×640 及以上
布局形式 左侧栏 + 主内容双栏 单栏居中,横向留白增加 纵向单列堆叠
输入方式 鼠标与键盘 触控为主,可接键盘 触控点按与滑动
侧栏表现 常驻展开,可折为图标条 横屏展开,竖屏收为图标条 收入抽屉菜单
默认字号 17px,段落行高 1.9 17px,触控按钮加大 16px,标题自动缩小
刷新方式 快捷键或按钮刷新 按钮刷新,手势可滚动 下拉刷新列表

桌面端

建议分辨率
1280×720 及以上
布局形式
左侧栏 + 主内容双栏
输入方式
鼠标与键盘
侧栏表现
常驻展开,可折为图标条
默认字号
17px,段落行高 1.9

平板

建议分辨率
1024×768 及以上
布局形式
单栏居中,横向留白增加
输入方式
触控为主,可接键盘
侧栏表现
横屏展开,竖屏收为图标条
默认字号
17px,触控按钮加大

手机

建议分辨率
360×640 及以上
布局形式
纵向单列堆叠
输入方式
触控点按与滑动
侧栏表现
收入抽屉菜单
默认字号
16px,标题自动缩小

常见使用环境

不同环境下对显示区域与操作精度的要求各不相同,下面的场景可作为设置参考。

pg网页版 在办公桌面多窗口环境下的显示参考

办公桌面多窗口

浏览器窗口与文档并排时保留 1024px 以上宽度,侧栏与主内容可同时可见,切换栏目不必反复滚动。

查看功能解析 →
pg网页版 在移动网络下手机端浏览的页面效果

通勤途中快速查看

手机端以竖屏单列为主,列表项高度统一,单手滑动即可浏览;移动网络下可开启流量节省降低图片清晰度。

查看入门基础 →
pg网页版 在会议投屏大屏环境下的界面比例

会议投屏与放大展示

投屏前将浏览器缩放调至 125%,标题与数据块在高分辨率屏幕上仍保持清晰,表格可横向滚动查看完整列。

回到设备适配 →

设备适配常见问题

关于分辨率、浏览器版本、横竖屏切换与显示设置的常见疑问,逐条说明处理方式。

打开页面后查看主内容区是否完整显示、侧栏是否正常展开。若屏幕宽度低于 1024px,侧栏会收起为图标条,这属于正常适配表现,不影响页面功能与内容范围。

字号与列表密度等偏好保存在当前浏览器中,同一账号在不同设备上登录时按各设备屏幕宽度重新计算布局。更换设备后建议重新确认一次显示设置,以获得合适的阅读密度。

Chrome、Edge、Safari、Firefox 的较新版本均可正常打开,建议保持浏览器更新。若仍在使用多年前的旧版本,部分样式与交互可能无法完整呈现,升级后即可恢复正常显示。

在显示设置中可分别调整正文字号与列表行距,调整后页面即时生效。桌面端也可使用浏览器自带的缩放功能,快捷键为按住 Ctrl 或 Command 再滚动鼠标滚轮,缩放范围建议控制在 80% 至 150% 之间。

会。设备旋转后页面会重新测量可用宽度,横屏时内容区两侧留白增加,竖屏时切换为单列纵向滚动。表格与图片块按新宽度等比调整,正在填写的内容不会被清空。

可在显示设置中开启流量节省模式,封面图会以较低清晰度加载,文字与列表内容不受影响。若页面长时间停留在加载状态,切换至稳定的无线网络后重新打开即可,已保存的显示偏好会继续沿用。

按设备查看 pg网页版 使用方式

选好手边的设备类型,即可对应到具体的显示说明与操作路径。

提交设备问题