1

ReactJSとjQueryとmaterializeというjQueryを使ったフレームワークを使ったサイトを作成しています。

そこで質問です。Reactにより生成されるgridにmaterializeによるgridレイアウトを使用していますが、スマホで観た時にグリッドが1カラムになってくれません。しかし、PCのブラウザ(クローム、サファリで確認)では画面幅を小さくした時に1カラム表示となります。画面が大きい場合は3カラムのグリッドです。

このようになってしまう原因としては何が考えられるでしょうか。また、ReactとjQuery(Bootstrapのようなフレームワーク)の共存は不可能なのでしょうか。react-bootstrapなどを使用しなければならないのでしょうか。

以下にReactのコードを示します。一応jQueryがロードされた後にこのコードを実行するようにしましたが、効果ありませんでした。

(function($){
var GridBox = React.createClass({
  loadData: function(){
    $.ajaxSetup({
      cache: false
    });
    $.getJSON(this.props.url, function(json){
      this.setState({data: json});
    }.bind(this));
  },
  getInitialState: function(){
    return {data: {
      "items": []
    }};
  },
  componentDidMount: function(){
    this.loadData();
  },
  render: function(){
    var rows = this.state.data.items.map(function(row){
      return (
          <Row data={row}/>
          );
    });
    return (
        <div>
          <h5>{this.state.data.title}</h5>
          {rows}
        </div>
        );
  }
});

var Row = React.createClass({
  render: function(item){
   var items = this.props.data.map(function(item){
    return (
        <Col item={item}/>
        );
   });
   return (
       <div className="row">
        {items}
        </div>
       );
  }
});

var Col = React.createClass({
  render: function(){
    var imageURL = "dist/images/" + this.props.item.thumbnail;
    return (
        <div className="col s12 m4">
          <div className="card">
            <div className="card-image waves-effect waves-block waves-teal">
              <a href={this.props.item.url} target="_blank">
                <img src={imageURL} className="lazy"/>
              </a>
            </div>
            <div className="card-content">
              <p>{this.props.item.name}</p>
            </div>
          </div>
        </div>
        );
  }
});


ReactDOM.render(
    <GridBox url="data/item.json"/>,
    document.getElementById('item')
    );


})(jQuery);

またこのコードはjsxでコンパイルしたあとでgulpにより、他のJavaScriptファイルと一緒にminify,uglifyして1つのJavaScriptにしてロードしています。

0

1 件の回答 1

0

このスレではtaylorさんが述べているように、この問題はviewportのことに関連していると私は思います。metaタグのviewportが使用されていない時は、スマホのブラウザはPCのブラウザのように振る舞うのです。

下記のコード例のように、viewport使用すると、スマホを使う場合はMaterializeのスマホへのレスポンシブCSSが期待される効果を発揮すると思います。

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <!-- 自分のコンテンツ -->
</body>
</html>
1
  • 1
    確認したところ、やはりviewportが抜けていたので追加したところちゃんと表示されるようになりました。ありがとうございます。 Commented 2016年3月18日 21:51

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。