Что я должен сделать, чтобы веб-просмотр изменял размеры изображений в контенте, чтобы он соответствовал экрану мобильного телефона

Question

веб-просмотр не меняет размеры изображений в контенте, чтобы соответствовать экрану мобильного телефона.

Я использую приложение "response-native-webview" и пытаюсь сделать так, чтобы веб-контент помещался на экране мобильного устройства, но изображения вообще не помещаются, что вызывает горизонтальную прокрутку.

Я использовал 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»
• "Reaction-native-webview": "^ 2.14.3"
• Android
• redmi note 4 - версия для Android 7.0
• windows 10

Answer 1

Вы пробовали setLoadWithOverviewMode(true)? Согласно документации:

Устанавливает, загружает ли WebView страницы в режиме обзора, то есть уменьшает ли содержимое, чтобы оно умещалось на экране по ширине. Этот параметр учитывается, когда ширина содержимого превышает ширину элемента управления WebView ...

Это звучит как то, что вы хотите.

Вы также можете попробовать решение на основе HTML с мета-тегом meta view , но вы должны обязательно вызвать setUseWideViewPort(true), иначе WebView не будет учитывать это значение.

Answer 2

Попробуйте это

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");