当前位置: 首页 > 面试题库 >

如何在react-native中缩小WebView?

谭玄天
2023-03-14
问题内容

我在react-native中使用“ WebView”来呈现网页。该网页没有适合移动设备的用户界面。

当我在Chrome浏览器中打开它时,如下图所示。 我想像下面这样

但是,当我渲染下面的代码时,它看起来像下面的图像。请参阅我已经尝试了不同的道具automaticallyAdjustContentInsets ={false}scalesPageToFit={false}。但这并没有给我欲望输出。

render(){
    const URL  = "https://stellarterm.com";
    return(
          <WebView 
             source={{URL}}
          />

结果

请随时提出任何解决方案。 任何第三方库也可以。


问题答案:

您的网站已在meta中设置了页面宽度 <meta name="viewport" content="width=1080">

因此,您需要使用InjectionJavaScript覆盖它

injectedJavaScript={const meta = document.createElement(‘meta’);
meta.setAttribute(‘content’, ‘width=device-width, initial-scale=0.5, maximum-
scale=0.5, user-scalable=0’); meta.setAttribute(‘name’, ‘viewport’);
document.getElementsByTagName(‘head’)[0].appendChild(meta); } scalesPageToFit={false}




 类似资料:
  • 我是的初学者,通过遵循本教程,尝试在我的android应用程序中安装

  • 我需要检测字体缩放后文本组件的字体大小。假设我有一个字体大小为18px的文本组件 用户通过操作系统辅助功能设置设置了大字体。现在我的文本已经用更大的字体显示了(超过18px)。我知道我可以使用< code > allowFontScaling = { false } ,但我不想失去文本的可访问性。我看到React native有一个API来获取字体比例< code > pixel ratio .

  • 你好,我想缩小我的apk文件在反应本地与proGuard.后启用proGuard在我的bulid.gradle文件: def ENABLEPROGUARDINRELEASEBILDS=true 运行此代码后,我遇到错误: 错误: F:\awesomeproject\android\app\build\intermediates\transform\proguard\release\0。ja:D8:

  • 我想只支持纵向视图。如何让React Native应用程序不自动旋转?我尝试搜索留档和Github问题,但没有找到任何有用的东西。

  • 在你把我和另一个类似的问题联系起来之前,比如这个或那个。我要说的是,我完全按照答案所说的做了,但我的gif不会像它应该做的那样动画化(尽管它是显示出来的)。 下面是我在一个函数中所做的操作,该函数通过主应用程序函数堆栈显示。导航容器和堆栈中的屏幕。导航器。(我使用React导航在屏幕上移动,这里的上下文是按下一个按钮,它显示DetailsScreen函数的内容) 这将显示我的gif的第一个静态图像

  • 它与文件一起工作很好,但是当我使用文件时,它是空的。我在某处读到了将重命名为,但它只显示一帧动画gif而没有动画。有什么想法吗?