[发明专利]适用于左右双屏的表单页面自适配展示方法、装置、计算机设备及计算机可读存储介质

权利要求书

1.一种适用于左右双屏的表单页面自适配展示方法，其特征在于，包括：

实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件，其中，所述表单展示屏是指用于展示表单页面的屏幕；

在确定在左右双屏中的表单展示屏触发屏幕尺寸变化事件时，获取所述表单展示屏的当前屏幕宽度；

根据所述当前屏幕宽度，确定当前的且所述表单页面的内容区域宽度；

根据所述内容区域宽度，确定当前的且在所述表单展示屏中的单行表单元素可展示数目以及单个表单元素可展示宽度；

根据所述表单页面的表单元素总数与所述单行可展示表单元素数目的比较结果，判断所述表单页面的所有表单元素是否需要换行展示；

若需要，则根据所述单个表单元素可展示宽度，使用弹性盒display:flex布局模式的伸缩换行flex-wrap属性在所述表单展示屏中换行展示所述所有表单元素。

2.根据权利要求1所述的表单页面自适配展示方法，其特征在于，实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件，包括：

基于window.matchMedia()函数，实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件，其中，所述表单展示屏是指用于展示表单页面的屏幕。

3.根据权利要求1所述的表单页面自适配展示方法，其特征在于，获取所述表单展示屏的当前屏幕宽度，包括：

基于document.body.clientWidth命令检测得到所述表单展示屏的当前屏幕宽度。

4.根据权利要求1所述的表单页面自适配展示方法，其特征在于，根据所述当前屏幕宽度，确定当前的且所述表单页面的内容区域宽度，包括：

判断所述表单页面是否具有左侧边栏；

若是，则确定当前的且所述表单页面的内容区域宽度等于所述当前屏幕宽度减去所述左侧边栏的固定宽度；

若否，则确定当前的且所述表单页面的内容区域宽度等于所述当前屏幕宽度。

5.根据权利要求1所述的表单页面自适配展示方法，其特征在于，根据所述内容区域宽度，确定当前的且在所述表单展示屏中的单行表单元素可展示数目以及单个表单元素可展示宽度，包括：

当所述内容区域宽度处于预设宽度区间内时，确定当前的且在所述表单展示屏中的单行表单元素可展示数目等于与所述预设宽度区间对应的预设数目，以及确定当前的且在所述表单展示屏中的单个表单元素可展示宽度等于所述内容区域宽度除以该预设数目，其中，所述预设宽度区间包括第一宽度区间、第二宽度区间或第三宽度区间，所述第一宽度区间基于第一屏幕类型确定，所述第二宽度区间基于第二屏幕类型确定，所述第三宽度区间基于第三屏幕类型确定，所述第一屏幕类型的尺寸小于所述第二屏幕类型的尺寸，所述第二屏幕类型的尺寸小于所述第三屏幕类型的尺寸。

6.根据权利要求1所述的表单页面自适配展示方法，其特征在于，根据所述内容区域宽度，确定当前的且在所述表单展示屏中的单行表单元素可展示数目以及单个表单元素可展示宽度，包括：

获取用户自定义的单行表单元素可展示数目N_uer；

根据所述内容区域宽度，按照如下公式计算得到单行表单元素最多可展示数目N_max：

式中，CW表示所述内容区域宽度，cw_min表示单个表单元素的最窄可展示宽度，floor()表示向下取整函数；

判断所述单行表单元素最多可展示数目N_max是否大于等于N_uer；

若是，则确定当前的且在所述表单展示屏中的单行表单元素可展示数目等于N_uer，以及确定当前的且在所述表单展示屏中的单个表单元素可展示宽度等于所述内容区域宽度除以N_uer。