［通用］行動端自適應

1.1 版本

1.2 應用場景

PC 端製作的報表在手機端查看時，FineReport 預設提供的自適應效果不盡人意。例如，報表比較大，在手機上被縮的非常小，字體模糊等等。

這時可透過行動端屬性裏的「自適應」選項，手動控制報表在行動終端上的顯示效果。

1.3 注意事項

1）行動端自適應屬性設定完成後，只在 HTML5 端和 App 端生效。

2）配置行動端自適應後若範本派送顯示 PC 端效果，建議將 PC 端自適應屬性設定為「預設」或「不自適應」。

2.1 設定方法

2.1.1 普通報表

在普通報表中，點選「範本>行動端屬性」， 如下圖所示：

注：若範本中有內容，若勾選「設定為手機範本畫布大小」按鈕，會觸發另存為以「_mobile」為後綴的範本，可參考 設定手機端範本 。 

2.1.2 決策報表

決策報表中支援對組件單獨設定行動端屬性，也支援對範本整體設定行動端屬性。

1）在決策報表中，選中某一報表塊或圖表塊，在下方「行動端」屬性面板中，可設定對應組件的自適應效果。如下圖所示：

2）點選「範本>行動端屬性」，可設定為手機端專屬範本。如下圖所示：

2.2 手機端範本說明

手機端範本說明如下表所示：

2.3 自適應效果

豎屏及橫屏自適規則可以分開控制，其中 Pad 端的規則採用「橫屏」的設定。

自適應屬性包括：橫向自適應、縱向自適應、不自適應、雙向自適應。具體說明及效果如下表所示：

注：效果圖來源於 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\basic\影像化顯示進度條.cpt 範本。

自適應屬性	說明	預覽效果
橫向自適應	報表按比例尺，橫向充滿螢幕
縱向自適應	縱向充滿，如果大則縮減，如果小則放大 橫向可滑動查看
雙向自適應	所有儲存格的寬度和高度，同步拉伸或縮減，充滿整個螢幕
不自適應	展示報表的原始大小

注：有些手機型號會出現「橫向自適應」不生效的問題，此時使用者可將範本中的儲存格高度拉高，這樣可確定橫向自適應之後縱向高度能完整顯示正文內容。

2.4 縮放邏輯

在行動端屬性設定中，預設勾選「允許雙擊/雙指縮放」，在行動端預覽範本時，則可以透過手指雙擊或雙指滑動縮放範本。

• 雙擊縮放：第一次雙擊放大，放大比例固定，第二次雙擊縮減回初始狀態。效果如下圖所示：

.

• 雙指縮放：雙指按住螢幕，滑動實現放大或縮減，縮放比例無限制。如下圖所示：

.

Pad 上行動端範本組件標題字號支援自動適應該裝置，該功能範圍說明如下表所示：