React允许手动缩放页面

问题

HTML允许手机浏览器进行缩放可以通过直接在head里面加mata标签，就想这样

<meta name="viewport" content="width=device-width,initial-scale=0.1,user-scalable=yes">

但是对于React好像就不那么容易解决，虽然可以在这个项目模板文件app.tsx或者app.js直接加mete标签，但是这样整个项目页面都被允许缩放。但实际上只想允许某几个页面允许缩放。

解决方式

1：经过思考，我想到的就是将那几个需要允许缩放的页面重新用一个入口文件进行。（PS：但是我只有2个文件，这样干还不知道是否可行，所以放弃了）

2：在页面加载还没渲染的时候，捕获meta标签，然后加以修改

实现

最终采用在页面加载时候捕获meta标签，然后加以修改，具体代码如下：

无状态

React.useEffect(()=>{
          
   
    // 添加禁止缩放的meta标签
    // <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/>
    Array.from(document.getElementsByTagName(meta)).filter(i=>{
          
   
        if(i.name===viewport){
          
   
            不允许缩放
            //i.content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;
            //允许缩放
             i.content=width=device-width,initial-scale=1.0,user-scalable=yes
        }
        return i
    })
},[])

有状态

componentDidMount() {
          
   
     Array.from(document.getElementsByTagName(meta)).filter(i=>{
          
   
      if(i.name===viewport){
          
   
      //允许缩放
        i.content=width=device-width,initial-scale=1.0,user-scalable=yes
      }
      return i
    })
  }