收藏
回答

wx-open-launch-weapp 这个标签的font-size样式不支持rem单位吗?

既然是放在H5中使用,为什么样式单位不支持rem呢,还是我使用有问题呢

最后一次编辑于  2020-07-09
回答关注问题邀请回答
收藏

5 个回答

  • LauHing[666]
    LauHing[666]
    2020-12-17
    var browser = {
      versions: function() {
        var u = navigator.userAgent,
          app = navigator.appVersion;
        return {
          mobile: !!u.match(/AppleWebKit.*Mobile.*/),
          ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
          android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
          iPhone: u.indexOf('iPhone') > -1,
          iPad: u.indexOf('iPad') > -1,
          weixin:u.toLowerCase().indexOf('micromessenger') > -1,
          Safari:u.indexOf('Safari') > -1
        };
      }(),
      language: (navigator.browserLanguage || navigator.language).toLowerCase()
    };
    let htmlFontSize = window.getComputedStyle(document.documentElement,null).fontSize.replace('px','')
    let btnFontSize = htmlFontSize*0.36 //rem转px
    let lineHeight = htmlFontSize*0.88 //rem转px
    this.wxBtnHtml = `
         
                    立即打开
           `
    this.$nextTick(()=>{
    
      let _this = this
      let wxBtn = document.getElementById('launch-btn')
      if (browser.versions.weixin) {
        // 微信的 ,点击后不操作,两秒后跳转下载地址
        //初始化jssdk相关配置后监听点击事件
        lauchApp().then(()=>{
          let wxBtn = document.getElementById('launch-btn')
          wxBtn.addEventListener('click',()=>{
            console.log('click1')
            setTimeout(()=>{
              _this.$router.push({path: '/pmd_Download'})
            },2000)
          })
        })
    
      } else {
          // 非微信的,带参数点击后根据客户端跳转唤起app的地址,两秒后跳转下载地址
        wxBtn.addEventListener('click',()=>{
          setTimeout(()=>{
            if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad || browser.versions.Safari) {
              // 跳转通用链接
              alert('跳转通用链接')
            } else if (browser.versions.android){
              // 跳转安卓链接
              alert('跳转安卓链接')
            } else {
              // 跳转应用下载链接
              _this.$router.push({path: '/pmd_Download'})
            }
          },2000)
        })
    
      }
    
    2020-12-17
    有用 1
    回复
  • Shoulder
    Shoulder
    2020-11-27

    我也是在惆怅这个问题,需要放一张图片的,只能用px, 尝试了rem,百分比都没效果,有妙招吗

    2020-11-27
    有用
    回复 1
  • Leon陈华德
    Leon陈华德
    2020-08-11

    确实是隔离,辣鸡

    2020-08-11
    有用
    回复
  • Boolean
    Boolean
    2020-07-30

    你好请问解决了么

    2020-07-30
    有用
    回复 2
  • 灵芝
    灵芝
    2020-07-10

    你好,现在表现是什么?请具体说明

    2020-07-10
    有用
    回复 8
    • 风
      2020-07-10
      我看了一下文档,wx-open-launch-weapp插槽中模版的样式是和页面隔离的,因此需要注意在插槽中定义模版的样式。在H5中我适配的方式是根据HTML的字体大小来换算成rem单位,但是使用了这个标签,写入插槽的内容就没法根据全局来做适配了,必须定义固定的px值来写标签里的内容样式,这个问题有好的解决方案吗
      2020-07-10
      回复
    • 风
      2020-07-10
      相当于这个标签内部的插槽内容的css样式没法继承页面中的父级和祖先级样式,而且使用数值单位只支持px,使用rem单位是不支持的,对样式的全局适配有比较大影响,希望这个问题官方能够优化下
      2020-07-10
      回复
    • L柠檬
      L柠檬
      2020-07-20
      我也是这个问题
      2020-07-20
      回复
    • L柠檬
      L柠檬
      2020-07-20
      回复下
      2020-07-20
      回复
    • 王帅
      王帅
      2020-07-23
      我也是这个问题
      2020-07-23
      回复
    查看更多(3)
登录 后发表内容
问题标签