【问题标题】:CSS: Are view height (vh) and view width (vw) units widely supported?CSS:是否广泛支持视图高度 (vh) 和视图宽度 (vw) 单位?
【发布时间】:2014-02-07 09:34:47
【问题描述】:

我正在使用 100vh 使 div 垂直居中,行高。 This site 对 vh 和 vw 的支持率约为 70%,这是一个公平的评估吗?您是否建议在构建站点时使用视口单位?我知道这有点主观,我只是在寻找比我更有经验的网络开发人员的意见。

编辑:感谢大家的投入,我确实希望它在移动设备上看起来不错,所以我想我必须放弃 vh。

【问题讨论】:

  • 请为此创建一个新问题;看看我的帖子,我刚刚添加了关于移动设备的部分
  • 好的,我会编辑出来的。

标签: css viewport-units


【解决方案1】:

同时使用 CSS vh 和 jQuery,这样更安全。
jQuery 示例:

var clientHeight = $( window ).height();
  $('.element').css('height', clientHeight);

和 CSS:

.element {height: 100vh;}

【讨论】:

  • 这似乎很痛苦
  • 生活是痛苦的。任何说不同的人都在卖东西。
【解决方案2】:

在我看来,统计数据很清楚,这是一个公平的评估。

我认为必须由您做出决定。如果您想使用最新最先进的技术让您的网站经得起未来考验,但又意识到目前存在一些问题,那么很好,那就去吧。

如果您不准备在您的在线形象上投入更多资金,那么请坚持使用旧方式,这绝不是错误的。

编辑:当我想创建响应式设计时,我首先开始为移动设备开发,然后创建桌面版本,以确保我的视口都能正常工作,因为在某些方面缺乏移动支持(尤其是 vmax)。但是关于这个,你可以问 50 个人,他们都会说其他话的可能性很大。

【讨论】:

    【解决方案3】:

    视口单元很棒,但大多数移动浏览器供应商设法使vh 在实践中无法使用。

    当你开始滚动或改变滚动方向时,地址栏要么消失要么回来;然后你停下来,松开你的手指,vh 值将突然与任何使用它的元素一起更新,从而导致 UX 噩梦(用户不希望在滚动结束时调整任何内容,改变现有元素的比例,重新布局内容等)。

    【讨论】:

      【解决方案4】:

      你链接到answers your question的页面真的。

      这取决于您需要支持的浏览器。

      IE9 中的部分支持是指支持“vm”而不是“vmin”。 iOS7 中的部分支持是由于 vh 单元的错误行为。所有其他部分支持是指不支持“vmax”单位。

      这表明在 iOS7 中使用视口单位可能是“错误的”。我不建议使用视口单位,而是使用:

      • 像素:例如height: 500px;
      • 百分比:例如height: 50%;

      这些值得到广泛支持,将产生最佳结果。

      【讨论】:

      • 像素和百分比不能总是创造出 vm 提供的东西。
      • 非常正确,目前即使在需要 vh 的地方我也无法使用 %
      【解决方案5】:

      好吧,您可以看到它已经用于桌面浏览器,但在移动设备上的支持非常有限。所以这实际上取决于你是想创建一个在计算机上看起来不错的网站,还是一个更兼容的基于像素的网站,也可以在手机上运行。

      【讨论】:

        【解决方案6】:

        这是一个很好的简单 JS 脚本,我用来确保 vh 单元可以在所有浏览器上工作 (几个月前我看到了这个并从那时起一直在使用它)

        // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
        let vh = window.innerHeight * 0.01;
        // Then we set the value in the --vh custom property to the root of the document
        document.documentElement.style.setProperty('--vh', `${vh}px`);
        
        // We listen to the resize event
        window.addEventListener('resize', () => {
          // We execute the same script as before
          let vh = window.innerHeight * 0.01;
          document.documentElement.style.setProperty('--vh', `${vh}px`);
        });
        

        我相信同样的方法也可以用于其他目的。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2013-07-10
          • 1970-01-01
          • 2013-01-02
          相关资源
          最近更新 更多