本指引描述了微信支付商戶使用H5頁面作為收銀臺時，H5頁面在微信內(nèi)展示適配用戶設(shè)置大字體的要求和指引。

本指引適用于微信支付商戶、服務(wù)商收款產(chǎn)品中H5頁面設(shè)計和實現(xiàn)。

為了響應國家對App適老化與無障礙改造的要求，為更多用戶都能獲得良好的微信體驗，微信內(nèi)支持設(shè)置頁面字體放大功能，用戶設(shè)置大號字體后，微信內(nèi)的元素會按比例放大顯示，H5網(wǎng)頁中的文字或圖片也會放大，所以需要做好大號字體頁面適配。

用戶微信端設(shè)置大號字體有兩個方法：

方法1：在微信內(nèi)通過進入“設(shè)置＞通用＞字體大小” 來調(diào)整字體大小，設(shè)置后，微信內(nèi)的頁面元素都會跟隨放大，效果如圖1所示。

方法2：在閱讀公眾號文章時通過“右上角＞調(diào)整字體”來設(shè)置字體大小，設(shè)置后，微信公眾號內(nèi)的H5頁面元素會跟隨放大。

圖1：如何設(shè)置大字體

現(xiàn)有商戶H5收銀頁面未做適配大字體時會出現(xiàn)信息溢出、遮擋、重疊等情況，嚴重影響了用戶的閱讀和操作，應避免以下幾類情況發(fā)生。

3.1. 頁面元素溢出

圖2：頁面展示文字溢出

解決方案：信息過大導致的溢出，可通過限制字數(shù)、設(shè)置該元素不跟隨放大（見限制頁面元素不放大）來解決。

3.2. 信息重疊

圖3：頁面展示文字重疊

解決方案：元素樣式避免使用絕對高度，請使用相對單位或不設(shè)置高度。

3.3. 信息遮擋

圖4：頁面文字被鍵盤遮擋

解決方案：信息被鍵盤、按鈕遮擋的情況，開發(fā)者可檢查頁面樣式，避免使用100%高度，保證字體放大后頁面可滾動瀏覽。

為了給用戶提供更好的使用體驗，避免頁面字體放大后出現(xiàn)信息溢出、重疊、遮擋等情況，要求開發(fā)者、設(shè)計師按如下6類指引做好頁面適配。

4.1. 哪些元素需要放大

默認情況下，包括文字，圖標，圖片，容器（cell、卡片），組件等頁面中的所有元素都要跟隨規(guī)則進行縮放。

當頁面中的文字信息足夠大（大于或等于40dp/pt），為了避免信息過大導致的溢出，設(shè)計師可以根據(jù)頁面具體情況允許該文字信息不進行放大，以來避免不必要的放大。

設(shè)計師可以根據(jù)頁面具體情況對于該頁面設(shè)置最大放大檔位（用戶側(cè)設(shè)置字號的檔位，安卓分為8檔，蘋果IOS分為6檔）。

圖5：頁面字體進行放大說明

4.2. 換行

內(nèi)容過多時可通過讓文本信息換行的方式，避免信息被截斷、重疊等情況，以保證信息展示完整。

圖6：頁面字體放大換行展示

4.3. 頁面滾動

空間不充足時，需支持頁面上下滾動，以保證信息不被按鈕、鍵盤或其他元素遮擋。

圖7：頁面字體放大后支持滾動條

4.4. 間距

為了保證用戶的閱讀效率，我們建議頁面中的間距不跟隨大字體模式縮放。當元素之間的間距不足以區(qū)隔信息，或者頁面中有較多的適配空間時，可以放大間距。為了更好的實現(xiàn)以上效果，我們建議開發(fā)者在開發(fā)時，間距樣式使用絕對單位，避免元素之間的間距跟隨字體大小變化而變化。

圖8：頁面字體放大后間距設(shè)置

4.5. 擁擠情況

當文字信息過多時，放大后容易出現(xiàn)重疊或被截斷的情況，此時應預留好內(nèi)容之間的安全距離，內(nèi)容過多需要折行，容器高度也相對延伸，調(diào)整內(nèi)容與容器水平居中對齊。原則如下：

圖9：頁面字體放大后擁擠情況對比

4.6. 限制頁面元素不放大

當頁面中的文字信息足夠大，為了避免信息過大導致溢出，設(shè)計師可以根據(jù)頁面具體情況設(shè)置該文字信息不進行放大。實現(xiàn)頁面部分元素不跟隨放大，開發(fā)者需按以下3個步驟操作：

步驟1：禁止微信內(nèi)網(wǎng)頁字體大小默認縮放（Android、iOS設(shè)置方式不一樣，詳見代碼示例中的備注1-1、1-2）。

步驟2：監(jiān)聽微信網(wǎng)頁字體大小的事件menu:setfont，獲取當前設(shè)置的字體大小信息。

步驟3：為不同的信息元素設(shè)置指定樣式。

代碼示例如下：

<script>
// 微信網(wǎng)頁字體大小自定義適配 Demo
document.addEventListener("WeixinJSBridgeReady", function (params) {
    // 1-1.設(shè)置禁止 Android 微信內(nèi)網(wǎng)頁字體大小默認縮放
    WeixinJSBridge.invoke("setFontSizeCallback", {
        fontSize: '2' // 默認檔位 2
    });
    // 2.監(jiān)聽網(wǎng)頁字體大小的事件，頁面加載完成或用戶手動修改字號會觸發(fā)該事件
    WeixinJSBridge.on('menu:setfont', function (e) { // e.fontSize 檔位  e.fontScale 放大比例
        // 3-1.業(yè)務(wù)邏輯
        // rem方式，根據(jù)檔位或放大比例設(shè)置根字號大小
        // 非rem方式，根據(jù)檔位或放大比例設(shè)置根節(jié)點命名空間className（如：wechat_fontsize_6）
    });
}, false);
</script>

<style>
/* 1-2.設(shè)置禁止 iOS 微信內(nèi)網(wǎng)頁字體大小默認縮放 */
body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}
/* 3-2.業(yè)務(wù)邏輯 */
.wechat_fontsize_6 .title { }
</style>
                                

商戶發(fā)布收銀H5頁面前， 需要做實際環(huán)境的測試和驗收。

具體驗收要求：在iOS手機和Android手機上分別進行驗收，建議驗收時考慮到最小機型的效果，如iPhone SE，安卓小屏機。在手機設(shè)置大字體后（方法見設(shè)置大號字體方法），H5網(wǎng)頁展示效果符合上文要求后才能上線。

適配后，開發(fā)者需要自查以下3點：
1、頁面中的文字、圖片、按鈕等元素均放大。
2、頁面中文字、圖片、按鈕等元素沒有現(xiàn)信息溢出、被遮擋、重疊等情況。
3、將字體大小調(diào)整到第6檔位時，保證頁面主要文字信息最小不小于18dp/pt。