适老化支持

tips 说明

兔小巢已经完成了移动端适老化改造,建议你参考文档开发,将产品的老人相关设置同步到兔小巢WebView中,方便老人浏览、反馈问题。

相关背景

2020年底,工信部印发《互联网应用适老化及无障碍改造专项行动方案》(以下简称《方案》),决定在全国范围内组织开展为期一年的互联网应用适老化及无障碍改造专项行动,致力于解决老年人、残疾人等特殊群体在使用互联网等智能技术时遇到的困难,推动充分兼顾老年人、残疾人需求的信息化社会建设,显著提升互联网应用适老化水平及无障碍普及率,增进包括老年人、残疾人在内的全体人民福祉。

兔小巢已参照《互联网网站适老化通用设计规范》、国家标准GB/T 37668-2019《信息技术互联网内容无障碍可访问性技术要求与测试方法》和行业标准YD/T1822-2008《信息无障碍 身体机能差异人群 网站无障碍评级测试方法》相关技术要求进行适老化及无障碍改造。这其中包括:

  • 可感知性:字体、行间距、对比度、颜色用途、文案
  • 可操作性:组件焦点大小、充足操作时间、浮窗
  • 可理解性:提示机制

适老化支持前后对比

  • 接入适老化支持前

首页截图 常见问题截图 常见问题详情截图 博客列表截图

  • 接入适老化支持后

首页截图 常见问题截图 常见问题详情截图 博客列表截图

客户端接入改造

客户端需要将系统字号,或者客户端字号转换成百分比同步设置到兔小巢WebView中:

#import "ViewController.h"

// 如果使用 WKWebview 的话,需要导入 Webkit 的头文件
#import "WebKit/WebKit.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    //创建WKWebView对象,设置大小为屏幕大小
    WKWebView *webview = [[WKWebView alloc] initWithFrame:CGRectMake(0, 36, [[UIScreen mainScreen] bounds].size.width, [[UIScreen mainScreen] bounds].size.height)];

      // 为webview添加Delegate
      webview.navigationDelegate = self;
    // 用户ID
    NSString *open_id = @"tucao_123";
    // 昵称
    NSString *nickname = @"tucao_test";
    // 头像url地址
    NSString *avatar = @"https://txc.qq.com/static/desktop/img/products/def-product-logo.png";

    // 获得 webview url,请注意url单词是product而不是products,products是旧版本的参数,用错地址将不能成功提交
    // 把1221数字换成你的产品ID,否则会不成功
    NSString *appUrl = @"https://support.qq.com/product/1221";

    // 设置请求体
    NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:appUrl]];

    // 请求方式为POST请求
    [request setHTTPMethod:@"POST"];
    [request setValue:@"application/x-www-form-urlencoded" forHTTPHeaderField:@"Content-Type"];
    NSString *body = [NSString stringWithFormat:@"nickname=%@&avatar=%@&openid=%@", nickname, avatar, open_id];
    [request setHTTPBody:[body dataUsingEncoding:NSUTF8StringEncoding]];

    // 将WebView对象添加到当前页面当中
    [self.view addSubview:webview];

    // WebView对象加载请求并且现实内容
    [webview loadRequest:request];

}

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{

       UIFont *font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
    UIFontDescriptor *ctFont = font.fontDescriptor;
    NSNumber *fontString = [ctFont objectForKey:@"NSFontSizeAttribute"];

    int size = ([fontString floatValue] / 17) * 100; // 17为系统标准字体大小
    NSString *javaScript = [NSString stringWithFormat:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust='%d%@'", size, @"%"];
    [webView evaluateJavaScript:javaScript completionHandler:nil];
}

@end
webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setDomStorageEnabled(true);       // 这个要加上

/* 获得 webview url,请注意url单词是product而不是products,products是旧版本的参数,用错地址将不能成功提交 */
String url = "https://support.qq.com/product/1221";

/* WebView 内嵌 Client 可以在APP内打开网页而不是跳出到浏览器 */
WebViewClient webViewClient = new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        super.shouldOverrideUrlLoading(view, url);
        view.loadUrl(url);
        return true;
    }

      @Override
      public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);

        // 获取手机系统字号
        try {
            Configuration configuration = new Configuration();
            Class<?> activityManagerNative = Class.forName("android.app.ActivityManagerNative");
            Object oam = activityManagerNative.getMethod("getDefault").invoke(activityManagerNative);
            Object config = oam.getClass().getMethod("getConfiguration").invoke(oam);
            configuration.updateFrom((Configuration) config);
            float fontScale = configuration.fontScale;
        }catch (Exception e) {

        }

        // 使用系统设置字号
        view.evaluateJavascript("document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust='" + fontScale * 100 + "%'", null);
    }
};
mWebView.setWebViewClient(webViewClient);

webView.loadUrl(url);

微信小程序

兔小巢小程序自动读取微信字体设置对小程序进行设置,用户无需额外配置。具体设置方式参见“微信 - 设置 - 通用 - 字体大小”。