How does the report mobile app implement page adaptive?

1. Description

PC on the production of good reports, in the mobile phone-side view, the report software default adaptive effect is not satisfactory. For example, the report is large, to the mobile phone is shrunk very small, the words are not clear and so on. For this finereport added option to manually control the display of the report on the mobile terminal. This article will demonstrate in detail how this feature is implemented and performed in a detailed operation.

2. Step 2.1 Install the Adaptive Settings plugin

Start the designer, open server > Plug-in Management > All plugins, select the report Adaptive plugin, and then install:

650) this.width=650; "Src=" http://dl2.iteye.com/upload/attachment/0113/5018/ 645afa45-1bd7-319e-a720-7d2e3b1697dc.jpg "style=" border:0px; "/>

Note: If the plugin does not appear in all plugins, update the jar package, or install the latest designer

After installation, restart the designer, open the template, click the menu template, there will be more than one template adaptive properties, click, you can manually control the app in the vertical screen and horizontal screen when the adaptive rules, such as:

650) this.width=650; "Src=" http://dl2.iteye.com/upload/attachment/0113/5020/ Ee51db6b-8d5e-309a-918b-e316902e1162.jpg "style=" border:0px; "/>

2.2 Description of the adaptive rules

Vertical screen and horizontal screen adaptive rules can be controlled separately, the pad on the rules are also used in the horizontal screen this setting.

Drop-down box we can see there are 4 options, respectively, the default, lateral adaptive, longitudinal adaptive, not adaptive;

The default is Finereport built-in rules, simply said is priority horizontal full, on this basis if the report is small, then appropriate amplification;

Lateral adaptive and longitudinal adaptive, is horizontal and vertical fill, if the larger, if smaller, enlarge;

The non-adaptive name is the original size of the display report.

3. Example

For example, the following report appears in the PC browser as follows:

650) this.width=650; "Src=" http://dl2.iteye.com/upload/attachment/0113/5022/ 076e7677-0560-3c38-a6fa-088b26f28668.jpg "style=" border:0px; "/>

Table is wide, this time with mobile phone view, the default effect such as:

650) this.width=650; "Src=" http://dl2.iteye.com/upload/attachment/0113/5024/ D0cf7bad-f7b0-3534-951e-3e26a4c201a3.jpg "style=" border:0px; "/>

You can see that the default effect will shrink the report so small that the word is not clear, in this case, you can set the vertical screen adaptive rules for this report, such as change to "vertical adaptive", such as:

650) this.width=650; "Src=" http://dl2.iteye.com/upload/attachment/0113/5026/ B65a0664-c104-3138-a0c3-ef4e5f589cb2.jpg "style=" border:0px; "/>

Refresh the report on the phone, you can see that the report is full of vertical, such as:

650) this.width=650; "Src=" http://dl2.iteye.com/upload/attachment/0113/5028/ D1b1f469-5175-33ae-8a6e-27b14c0ea77d.jpg "style=" border:0px; "/>

Note: This feature is only supported at the beginning of ios8.1.4 and the android8.1.5 version.

How does the report mobile app implement page adaptive?