问题现象
平板设备上应用的Web页面中的字体尺寸与手机设备相比,显示的过大或过小。
背景知识
- ArkWeb:提供了Web组件,用于在应用程序中显示Web页面内容。
- Web响应式布局:介绍Web侧如何进行多设备适配,结合Web组件实现在不同设备上的定制体验。内容涵盖相对单位、媒体查询、监听窗口变化事件等多设备适配能力。
问题定位
- 查看对应Web页面网址,在浏览器打开对应网址调试。检查Web页面代码中Text的fontsize设置的值是否为固定值。当尺寸设置为固定值时,会导致在平板上展示时出现过大或者过小的情况。
- 建议检查Web页面有没有采用相对单位(%、em、rem、vw/vh)、媒体查询(media)、监听窗口变化事件(通过JavaScript注册resize事件)等多设备适配能力进行页面开发。
- 查看对应Web网页中的head标签是否包含适配移动端的视口元素。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
分析结论
Web页面没有采用相对单位、媒体查询、窗口监听事件等方式做响应式布局适配,导致Web页面在平板上展示时,对比手机设备上的比例,字体显示过大或过小。
修改建议
采用Web响应式布局,通过相对单位、媒体查询、窗口尺寸监听事件等方法动态变化页面文本元素大小。具体可参考Web响应式布局的实现。