相关疑难解决方法(0)

在调整浏览器窗口大小时,如何让React重新渲染视图？

背景

我有一些块,我想在页面上单独布局,但我也希望它们在浏览器窗口更改时更新.最终结果将是Ben Holland的 Pinterest布局,但使用React编写的不仅仅是jQuery.我还有一段路要走.

码

这是我的应用程序:

var MyApp = React.createClass({
  //does the http get from the server
  loadBlocksFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      mimeType: 'textPlain',
      success: function(data) {
        this.setState({data: data.events});
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentWillMount: function() {
    this.loadBlocksFromServer();

  },    
  render: function() {
    return (
        <div>
      <Blocks data={this.state.data}/>
      </div>
    );
  }
});

React.renderComponent(
  <MyApp url="url_here"/>,
  document.getElementById('view')
)

然后我有了Block组件(相当于Pin上面Pinterest示例中的一个):

var Block = React.createClass({
  render: function() {
    return ( …

我有一个非常奇怪的问题...在每个浏览器和移动版本中我遇到这种行为:

• 加载页面时所有浏览器都有一个顶级菜单(例如显示地址栏),当您开始滚动页面时,该菜单会向上滑动.
• 100vh仅在视口的可见部分计算,因此当浏览器栏向上滑动100vh时增加(以像素为单位)
• 所有布局都重新绘制并重新调整,因为尺寸已更改
• 对用户体验的糟糕跳跃效果

怎么能避免这个问题？当我第一次听到视口高度时,我很兴奋,我认为我可以将它用于固定高度块而不是使用javascript,但现在我认为唯一的方法是实际上javascript与一些resize事件......

您可以在以下位置查看问题:示例站点

任何人都可以帮我/建议一个CSS解决方案吗？

简单的测试代码:

/* maybe i can track the issue whe it occours... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0; padding:0; }

/*
  this is the box which should keep constant the height...
  min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
  min-height:100vh;
  position:relative;
}

.vhbox .t{
  display:table;
  position:relative;
  width:100%;
  height:100vh;
}

.vhbox .c{ …

我最近开发了一个网站,可以获取混合的http/https内容.因此,我总是将地址栏显示在顶部(它不会像其他网站一样自动隐藏).这就是我在说的:

这是该网站的链接.

内容是从各种来源获取的,因此无法过滤非https内容.由于该网站是用于阅读的,因此非全屏显示对读者来说是痛苦的.那么,有没有办法强制自动隐藏行为？

PS:该网站使用Twitter Bootstrap,如果它有帮助.
PPS:我不想使用全屏API,它对此来说太重了.

计算移动Safari上可用空间的正确方法是什么？通过查看区域,我们指的是Web应用程序实际可用的屏幕数量,即窗口高度减去地址和书签栏.

iOS 7可以防止隐藏地址栏,我们需要正确考虑视口高度.

我创建了一个有角度的应用程序，其中侧边栏是height: 100%。但是，在 Android 版 Chrome 中查看 Web 应用程序时，滚动文档时：

1. chrome地址栏轻轻向上滑动
2. 100% 实际尺寸保持不变，直到您 TouchEnd

深灰色侧边栏通常height: calc(100% - 55px)应始终保持顶部栏可见，并始终填充顶部栏和底部之间的剩余空间。

我已经尝试了几种方法来解决这个问题。页脚有bottom: 0，而且事实上这个页脚总是正确呈现的。所以这让我尝试使用top: 55px; bottom: 0而不是height: calc(100% - 55px). top但从您同时设置和 的那一刻起bottom，结果与设置高度相同。

有谁知道如何在地址栏出现/消失时使视口调整其高度？