下载掌阅APP，畅读海量书库
立即打开
为了适应不同的需求，确保H5页面在不同的设备或平台上呈现良好的效果，提供良好的用户体验，H5页面的设计往往在尺寸、页面适配、文件大小等方面有一定的要求和规范。
由于H5页面具有跨平台性，可以在不同的终端上展示，因此还需要使H5页面的尺寸能够满足不同终端的屏幕大小。
手机是最常见的终端设备之一，设计H5页面时可根据特定手机型号的屏幕尺寸进行设计。虽然型号不同的手机尺寸不同，但目前H5页面普遍采用的页面尺寸是在640像素×1136像素的基础上，减去微信或浏览器观看时的手机顶部高度128像素，得到最终的H5页面尺寸640像素×1008像素。图1-17所示为手机屏幕尺寸示意。
▲图1-17 手机屏幕尺寸示意
为了确保制作完成后的H5页面能够适配不同屏幕尺寸的手机，很多H5制作工具或平台都有“自动适配”功能，只需选择一种手机屏幕尺寸进行设计，即可实现对其他手机屏幕尺寸的适配。但由于不同手机屏幕的长宽比例存在差异，在使用“自动适配”功能后，仍可能出现部分页面边缘区域无法完整显示的情况。为了避免这种情况出现，设计师可以将重要内容居中放在安全框中（安全框指手机屏幕中可以完整显示内容的安全区域，该区域不会被屏幕裁剪或者遮挡），以确保其在各种屏幕上都能够清晰展示。为了测试页面适配效果，可以生成二维码并在手机端进行预览，这样可以更准确地判断页面在手机上的实际显示效果，以进行调整和优化。
一般情况下，如果H5页面的加载时间超过5秒，用户就会感觉页面卡顿，可能导致用户直接关闭页面。而这种页面加载缓慢的情况，大多是由于文件过大造成的。因此，很多H5设计平台都会对添加的文件的大小有一定的要求。以Mugeda为例，该平台要求一张图片不超过10 MB，一个视频不超过20 MB。当图片或视频过大时，可对素材进行压缩，减小H5文件的大小，以免出现加载时间过长的情况。
● 图片压缩。常用的H5图片素材主要有PNG和JPEG两种格式，可使用Photoshop来进行压缩。设计师只需启动Photoshop，打开需要压缩的素材，然后选择【文件】/【导出】/【存储为Web所用格式（旧版）】命令，打开“存储为Web所用格式（100%）”对话框，如图1-18所示，在其中减小品质和图像大小参数，从而压缩图片。
▲图1-18 “存储为Web所用格式（100%）”对话框
● 视频压缩。压缩视频可以使用专业的多媒体文件处理软件，如格式工厂等。也可使用一些在线编辑器来完成，如Video2Edit等，设计师无须下载和安装，只需在其网站首页选择“压缩影片”选项，打开“在线压缩视频”页面，将需要压缩的视频拖动到紫色的方块中，在其下方还可设置文件大小和格式，单击
按钮后便可压缩视频。