增加网页视图上的字体Flutter

np8igboo 于 2022-11-30 发布在 Flutter

关注(0)|答案(2)|浏览(158)

请帮助，我有一个WebView屏幕上显示的网站。这个网站适应宽度的手机和减少字体。我可以以某种方式增加字体吗？

body: Container(
     child: WebView(
       initialUrl: url,
       javascriptMode: JavascriptMode.unrestricted,
     ),
   ),

flutter

来源：https://stackoverflow.com/questions/74219970/increase-font-on-webview-flutter

2条答案

按热度按时间

icomxhvb1#

Android足够智能，可以在不使用viewport的情况下识别html代码，但IOS没有。你必须显式地将viewport设置为移动设备，就像你让webapp对移动设备做出响应一样。
最好对注解进行换行以正确渲染。
这就是您的代码所需要的：

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><!--rest of your html-->

赞(0）回复(0）举报 2022-11-30

exdqitrt2#

你可以使用flutter_inappwebview插件（我是作者）来设置自定义文本大小/缩放到整个网页。
在Android上，我们可以使用InAppWebViewSettings.textZoom属性。在iOS上，我们需要使用JavaScript并设置text-size-adjust CSS属性。
下面是一个使用当前最新版本6（6.0.0-beta.18）的代码示例：

import 'dart:collection';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

const kInitialTextSize = 100;
const kTextSizePlaceholder = 'TEXT_SIZE_PLACEHOLDER';
const kTextSizeSourceJS = """
window.addEventListener('DOMContentLoaded', function(event) {
  document.body.style.textSizeAdjust = '$kTextSizePlaceholder%';
  document.body.style.webkitTextSizeAdjust = '$kTextSizePlaceholder%';
});
""";

final textSizeUserScript = UserScript(
    source: kTextSizeSourceJS.replaceAll(kTextSizePlaceholder, '$kInitialTextSize'),
    injectionTime: UserScriptInjectionTime.AT_DOCUMENT_START);

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  if (!kIsWeb &&
      kDebugMode &&
      defaultTargetPlatform == TargetPlatform.android) {
    await InAppWebViewController.setWebContentsDebuggingEnabled(kDebugMode);
  }
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final GlobalKey webViewKey = GlobalKey();

  InAppWebViewController? webViewController;

  int textSize = kInitialTextSize;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Custom Text Size"),
          actions: [
            IconButton(
                onPressed: () async {
                  textSize++;
                  await updateTextSize(textSize);
                },
                icon: const Icon(Icons.add)),
            IconButton(
                onPressed: () async {
                  textSize--;
                  await updateTextSize(textSize);
                },
                icon: const Icon(Icons.remove)),
            TextButton(
              onPressed: () async {
                textSize = kInitialTextSize;
                await updateTextSize(textSize);
              },
              child: const Text(
                'Reset',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ],
        ),
        body: Column(children: <Widget>[
          Expanded(
            child: InAppWebView(
              key: webViewKey,
              initialUrlRequest:
              URLRequest(url: WebUri("https://github.com/flutter")),
              initialUserScripts: UnmodifiableListView(
                  !kIsWeb && defaultTargetPlatform == TargetPlatform.android
                      ? []
                      : [textSizeUserScript]),
              initialSettings: InAppWebViewSettings(textZoom: textSize),
              onWebViewCreated: (controller) async {
                webViewController = controller;
              },
            ),
          ),
        ]));
  }

  updateTextSize(int textSize) async {
    if (!kIsWeb && defaultTargetPlatform == TargetPlatform.android) {
      await webViewController?.setSettings(
          settings: InAppWebViewSettings(textZoom: textSize));
    } else {
      // update current text size
      await webViewController?.evaluateJavascript(source: """
              document.body.style.textSizeAdjust = '$textSize%';
              document.body.style.webkitTextSizeAdjust = '$textSize%';
            """);

      // update the User Script for the next page load
      await webViewController?.removeUserScript(userScript: textSizeUserScript);
      textSizeUserScript.source =
          kTextSizeSourceJS.replaceAll(kTextSizePlaceholder, '$textSize');
      await webViewController?.addUserScript(userScript: textSizeUserScript);
    }
  }
}

完整的项目代码示例可从https://github.com/pichillilorenzo/flutter_inappwebview_examples/tree/main/custom_text_size获得
x1c 0d1x