我应该怎么做才能使 webview 调整内容中的图像大小以适应移动屏幕答案

【问题标题】：What should I do to make webview resizes images in the content to fit the mobile screen我应该怎么做才能使 webview 调整内容中的图像大小以适应移动屏幕
【发布时间】：2019-01-06 18:29:25
【问题描述】：

webview 不会调整内容中的图像大小以适应移动屏幕。

我使用“react-native-webview”，我试图让网页内容适合移动屏幕，但图像根本不适合导致水平滚动。

我使用了scalesPageToFit={true}，但没有帮助。我也试过style={{ flex: 1, width: Dimensions.get('window').width}} 和style={{ flex: 1, width:'100%', alignSelf: 'stretch' }}，但我没有得到任何改变。我尝试了scrollEnabled={false}，但没有任何效果。

“react-native”：“0.57.8”
“反应”：“16.6.3”
“react-native-webview”：“^2.14.3”
机器人
redmi note 4 - 安卓7.0版
Windows 10

【问题讨论】：

标签： android react-native webview

【解决方案1】：

试试这个

webUrl = "<a href=\""+your_image_url+"\" target=\"_blank\">\n" +
    "  <img src=\""+your_image_url+"\" style=\"width: 400px; height: 180px;\">\n" +
    "</a>";

your_webView.loadData(webUrl, "text/html", "utf-8");

【讨论】：

【解决方案2】：

你试过setLoadWithOverviewMode(true)吗？根据文档：

设置 WebView 是否以概览模式加载页面，即按宽度缩小内容以适应屏幕。当内容宽度大于 WebView 控件的宽度时会考虑这个设置...

这听起来正是你想要的。

您也可以尝试使用meta viewport tag 的基于HTML 的解决方案，但您应该确保调用setUseWideViewPort(true)，否则WebView 将不会尊重该值。

【讨论】：

对不起，你能解释一下吗？！因为我是 React native 的初学者，而且我以前没有使用过 android 或 java 的经验。我试图修改 ReactWebViewManager.java 文件以在 protected WebView createViewInstance 函数中包含这一行 setting.setLoadWithOverviewMode(true); 并运行命令 react-native run-android start 但没有任何变化。

【解决方案3】：

在</body> 之前添加<script> 标记。

它会自动调整所有图像的大小。

$(window).load(function() {
  $('img').each(function() {
    var WidthMax = 350;
    var HeightMax = 300;
    var width = $(this).width();
    var height = $(this).height();

    if ((width > WidthMax) || (height > HeightMax)) {
      if (width > WidthMax)
        $(this).css("width", WidthMax);
      else
        $(this).css("height", HeightMax);
      $(this).mouseover(function() {}

      ).mouseout(function() {
          $('#out').remove();
        }

      ).mousemove(function(e) {

        var x = e.pageX;
        var y = e.pageY;
        $('#out').css("top", y + 15);
        $('#out').css("left", x + 15);
      });
    }
  });
});

【讨论】：