【问题标题】:Viewport scale in react-native-webview keep fontsize of headerreact-native-webview中的视口比例保持标题的字体大小
【发布时间】:2021-05-18 09:18:18
【问题描述】:

我正在开发一个应用程序,该应用程序将包含 Web 内容、生活在 Web 视图中,以及使用 react-native 构建的一些其他内容和视图。我有一个配置用户可扩展的元标记视口是。

但我的问题是,当我缩放我的 web 视图时,我想要一些跨度的内容 HTML 不与其他内容一起缩小,并且该文本保持当前大小。我在 Gmail 的邮件应用详细信息视图中找到了一个示例。

谢谢!

在区域 1 中,此文本在缩放时不会改变字体,

在第 2 区,内容缩小

【问题讨论】:

  • 没人帮我吗?
  • 请提供一个工作代码最少的示例应用程序。
  • @KiênTrầnTrung,我想帮助你但不可能,因为你的问题信息不够,甚至主要的愿望都不清楚。谁是使用 GIF 图像的示例,或者我不知道更详细的屏幕截图。
  • 我只是添加了更多图像。
  • @KiênTrầnTrung 请您提供一些文本形式的代码,而不是屏幕截图。

标签: html react-native webview scale viewport


【解决方案1】:

我很清楚你的要求。

如果您在移动设备上使用 GMail,放大将导致电子邮件放大,但不会放大电子邮件的标题。但是,如果您放大标题本身,它将在该点放大。

您正在寻找的是如何处理多点触控交互。

GMail 通过在放大目标元素时阻止默认的放大行为来做到这一点。在这种情况下,电子邮件正文。

放大标题时,不再阻止默认​​行为。

实现起来不是一件小事。您需要花一些时间来了解多点触控交互。你可以在 MDN 上找到很棒的信息。

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Multi-touch_interaction

【讨论】:

  • 在您看来,我最好从元标记中删除视口并满足基于多点触控交互的内容的缩放动作。对?我觉得有可能
  • @KiênTrầnTrung 绝对将视口标签留在其中。您可以在仍然使用视口标签的同时满足缩放操作。只是不要设置最大比例,你会很成功。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-06-11
  • 2016-09-04
  • 1970-01-01
相关资源
最近更新 更多