Question

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

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

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

“反应本机”：“ 0.57.8”
“反应”：“ 16.6.3”
“ react-native-webview”：“ ^ 2.14.3”
android
redmi note 4-安卓7.0版
windows 10

Answer 1

尝试

@using (Html.BeginForm("Add-Supplier", "Purchase-Orders", new { id = Model.PurchaseOrderId, supplierId = Model.SupplierId }, FormMethod.Post, new { role = "form" }))
{
    <div class="form-group stMarTop10">
        @Html.LabelFor(m => m.SupplierId, new { @class = "label label-default" })
        @(Html.DropDownListFor(m => m.SupplierId, Model.SupplierSelectListItems, new { onchange = "this.form.submit();", @class = "form-control wdef" })
    </div>
}

Answer 2

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

设置WebView是否以概述模式加载页面，即缩小内容以适合屏幕宽度。当内容宽度大于WebView控件的宽度时，将考虑此设置。

这听起来就像您想要的。

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

Answer 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);
      });
    }
  });
});

如何使Webview调整内容中图像的大小以适合移动屏幕

3 个答案: