1

habe ich die folgende Navigationskomponente in einem Meteor App Modifizieren von Mantra sample blog app:Reagieren-Bootstrap Navbar.Collapse mit Meteor 1.3 und Mantra

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; 

Es funktioniert normal, und wenn ich meinen Browser auf meinem Laptop Größe verändern wird normalerweise zusammenbrechen, aber wenn ich es in einem Handy öffne (physisches Moto X 2014 oder emuliertes Nexus 5X auf Chrom), wird die Navbar nicht zusammenbrechen, ich benutze Meteor neueste Version (1.3) mit React-Bootstrap 0.28.4, ich bin auch mit den weniger und css-dateien von der sb-admin-2 theme, die normalerweise auf mobile zusammenbrechen, gibt es keinen grund, warum dies nicht mit diesem Szenario speziell funktioniert?

Antwort

0

die Antwort gefunden, ich beschönigt ich nicht das Meta-Tag hatte:

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

Da auch Mantra mit JS für Templating ermutigt, habe ich Kadira:meteor-dochead die Meta-Tags hinzuzufügen, habe ich eine Meta Js-Datei in client/configs mit dem folgenden Code:

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

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

und importiert sie in client/configs/context.js