Question

我在Meteor应用中创建了以下导航组件，从Mantra sample blog app修改：

import React from 'react';
import { Nav, Navbar, NavItem } from 'react-bootstrap';

const Navigation = () => (
  <Navbar staticTop>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="/">Meteorball</a>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
      <Nav pullRight>
        <NavItem eventKey={1} href="/new-crew">New Crew</NavItem>
      </Nav>
    </Navbar.Collapse>
  </Navbar>
);

export default Navigation;

它正常工作，如果我在笔记本电脑上调整浏览器大小，它会正常崩溃，但是当我用手机打开它（物理Moto X 2014或模拟Nexus 5X镀铬）时，导航栏不会崩溃，我正在使用Meteor最新版本（1.3）和React-Bootstrap 0.28.4，我也使用来自sb-admin-2 theme的less和css文件，这些文件在移动设备上正常崩溃，是否有任何理由不这样做。是否特别使用此方案？

Answer 1

找到了答案，我掩饰了我没有meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1">

此外，由于Mantra鼓励使用JS进行模板化，我使用Kadira:meteor-dochead添加元标记，我使用以下代码在client/configs内创建了一个meta.js文件：

import {DocHead} from 'meteor/kadira:dochead';

export default function () {
let metaInfo = {name: 'viewport', content: 'width=device-width, initial-scale=1'};
  DocHead.addMeta(metaInfo);
}

并将其导入client/configs/context.js

React-Bootstrap Navbar.Collapse与Meteor 1.3和Mantra

1 个答案: