目录

平板设备上应用的Web页面中,字体显示过大或过小

问题现象

平板设备上应用的Web页面中的字体尺寸与手机设备相比,显示的过大或过小。

背景知识

问题定位

  1. 查看对应Web页面网址,在浏览器打开对应网址调试。检查Web页面代码中Text的fontsize设置的值是否为固定值。当尺寸设置为固定值时,会导致在平板上展示时出现过大或者过小的情况。
  2. 建议检查Web页面有没有采用相对单位(%、em、rem、vw/vh)、媒体查询(media)、监听窗口变化事件(通过JavaScript注册resize事件)等多设备适配能力进行页面开发。
  3. 查看对应Web网页中的head标签是否包含适配移动端的视口元素。
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

分析结论

Web页面没有采用相对单位、媒体查询、窗口监听事件等方式做响应式布局适配,导致Web页面在平板上展示时,对比手机设备上的比例,字体显示过大或过小。

修改建议

采用Web响应式布局,通过相对单位、媒体查询、窗口尺寸监听事件等方法动态变化页面文本元素大小。具体可参考Web响应式布局的实现。