サーバー側のレンダリング+レスポンシブデザイン+インラインスタイル - >使用するブレークポイント？

Question

私はReactJSで構築されたレスポンシブなWebアプリケーションを用意しています。

ビューポートのサイズに応じて、アプリケーションのレイアウト/動作が変更されます。しかし、これらの変更はすべて、単純なCSSメディアクエリで行うことができるだけでなく、JSの振る舞いやHTML構造も幅に応じて変更する必要があります。

例えば、私が持っている可能性があり：

幅800ピクセルの下で：

<div class="app"> 
    <div class="menu-mobile">...</div> 
    <div class="content">...</div> 
    <div class="mobile-left-menu">...</div> 
    <div class="footer-mobile">...</div> 
</div> 

幅 800ピクセル上：今

<div class="app"> 
    <div class="menu">...</div> 
    <div class="main"> 
    <div class="left-menu">...</div> 
    <div class="content">...</div> 
    <div class="right-menu">...</div> 
    </div> 
    <div class="footer">...</div> 
</div> 

、私は、サーバー側のレンダリングを使用したいですそのアプリケーションのために。しかし、サーバー上には幅がないので、どのHTML構造をクライアントに返すのかわかりません。

私は、静的なデフォルトのサーバー側のブレークポイントを使用するソリューションを探していないことに注意してください。クライアント側では、そのアプリケーションを修正します。私は、そのデバイスに応じて適切なHTML構造をクライアントに返すソリューションを探しています。彼がブラウザでjavascriptを無効にするとうまくいくはずです。

---

一つは、私は両方のために必要なHTMLをレンダリングすることができると主張し、プレーンなCSSのmediaqueriesとdisplay: noneで必要な部分を表示/非表示が、それはアプリを複雑にし、それが未使用のHTML要素の多くをレンダリングするだろうことができ一般的に、ユーザーがブレークポイントの上または下に移動する可能性は低いから（つまり、モバイルデバイスを使用している場合、デスクトップのhtml要素は使用されません）

また、インラインスタイルを使用する場合は、これらのインラインスタイルをサーバー上の正しい幅にレンダリングする必要があるため、複雑です。

私はseenをブラウザのUAに盗聴させて、ビューポートのサイズを推測することを考えている人がいます。しかし、いくつかの安全でない画面サイズの検出でも、私はサーバー側のデバイスの画面の向きを知ることができません。

この問題を解決するために何かできますか？

Answer 1

私は、これはあなたが望むものだと思いますが、これは知事のソリューションではありません

1.whatあなたは、モバイルユーザーがPC版、および詩に直接とhtmlなしでモバイルページを取得したい

を重要私は

使用bのそれを解決2.how何のCSSの必要性（代わりに、インラインスタイル）、およびより少ないネットワーク

を保証していないその逆、ローサーユーザーエージェントを使用してモバイルやタブレットを検出し、クライアントがすべてロードされたときにサーバー上で予測とレンダリングを行い、スクリーンソリューションを再確認し、誤った予測があった場合にレンダリングを再実行できます。

サイズを変更し、姿勢の変化、あなたの再来を変更し、自動に

3.shot欠点

少ないネットワークレンダリングウィンドウにコールバックをバインドすることができ、以下の手段が非常に非常に少ない

falseが予測しますページがロードされたときに更新される可能性があります。

//server side detect and show different, if got force param, use force solution 
 
const detected = bowser._detect(req.get('User-Agent')) 
 
const initState = req.query.force ? { 
 
    [req.query.force]: true, 
 
} : { 
 
    bowser: { 
 
    mobile: detected.mobile, 
 
    tablet: detected.tablet, 
 
    } 
 
} 
 
const redux = initStore(initState) 
 
serverRender(redux) 
 

 
//component X, show different content 
 
const X = ({ 
 
    mobile 
 
}) => (<div> 
 
    {!!mobile?(<div>mobile</div>):(<div>pc</div>)} 
 
</div>) 
 

 
export default connect((state) => { 
 
    return { 
 
    mobile: detected.mobile, 
 
    tablet: detected.tablet, 
 
    } 
 
})(X) 
 

 
//top level component 
 
componentDidMount() { 
 
    const reflow =() => { 
 
    switch ($(window).width()) { 
 
     case >800: 
 
     this.props.dispatch(setSolution('pc')) 
 
     default: 
 
     this.props.dispatch(setSolution('mobile')) 
 
    } 
 
    } 
 
    if (typeof window != 'undefined') { 
 
    reflow() 
 
    } 
 
    $(window).resize(() => { 
 
    reflow() 
 
    }) 
 
    $(window).on("orientationchange",() => { 
 
    reflow() 
 
    }) 
 
}