सर्वर-साइड प्रतिपादन + उत्तरदायी डिजाइन + इनलाइन शैलियों -> जो उपयोग करने के लिए ब्रेकपॉइंट?

Question

मेरे पास एक प्रतिक्रियाशील वेब एप्लिकेशन है जो ReactJS के साथ बनाया गया है जिसके लिए मैं एक दिन सर्वर-साइड प्रतिपादन का समर्थन करना चाहता हूं।

व्यूपोर्ट आकार के अनुसार, एप्लिकेशन लेआउट/व्यवहार में परिवर्तन। लेकिन इन सभी परिवर्तनों को न केवल सादा सीएसएस मीडियाक्वियर के साथ किया जा सकता है: जेएस व्यवहार, और अंतर्निहित एचटीएमएल संरचना भी चौड़ाई के अनुसार बदलना होगा।

उदाहरण के लिए मैं हो सकता है:

तहत 800px चौड़ाई:

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

ऊपर 800px चौड़ाई:

<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 संरचना क्लाइंट पर वापस आती है।

ध्यान दें कि मैं एक ऐसे समाधान की तलाश नहीं कर रहा हूं जो स्थिर डिफ़ॉल्ट सर्वर-साइड ब्रेकपॉइंट का उपयोग करे, और क्लाइंट पर ऐप को सही करे। मैं एक ऐसे समाधान की तलाश में हूं जो क्लाइंट को अपने डिवाइस के अनुसार उचित एचटीएमएल संरचना में वापस लाएगा। तो अगर वह अपने ब्राउज़र पर जावास्क्रिप्ट को अक्षम करता है तो उसे ठीक काम करना चाहिए।

---

यह तर्क हो सकता है कि मैं एचटीएमएल दोनों के लिए आवश्यक प्रस्तुत करना सकता है, और छिपाने/सादे सीएसएस mediaqueries और display: none के साथ आवश्यक भागों दिखाने के लिए, लेकिन यह एप्लिकेशन पेचीदा और यह अप्रयुक्त HTML तत्वों का एक बहुत प्रस्तुत करना होगा क्योंकि आम तौर पर यह संभावना नहीं है कि उपयोगकर्ता ब्रेकपॉइंट के ऊपर/नीचे चलता है (मेरा मतलब है कि उसके पास मोबाइल डिवाइस है, डेस्कटॉप के लिए एचटीएमएल तत्वों का कभी भी उपयोग नहीं किया जाएगा)

इसके अलावा, अगर मैं इनलाइन-शैली का उपयोग करना चाहता हूं, तो यह बन जाता है जटिल क्योंकि मुझे सर्वर पर सही चौड़ाई के लिए इन इनलाइन शैलियों को प्रस्तुत करना होगा।

मेरे पास seen कुछ लोग ब्राउज़र व्यू को अपने व्यूपोर्ट आकार का अनुमान लगाने के अनुमान के बारे में सोच रहे हैं। लेकिन कुछ असुरक्षित स्क्रीन आयाम पहचान के साथ भी, मुझे यकीन नहीं है कि हम सर्वर-साइड पर डिवाइस स्क्रीन अभिविन्यास को जान सकते हैं।

क्या मैं इस समस्या को हल करने के लिए कुछ भी कर सकता हूं?

Answer 1

मुझे लगता है कि यह तुम क्या चाहते है, लेकिन इस एक प्रीफेक्ट समाधान नहीं है

1.what मायने रखती है

आप मोबाइल उपयोगकर्ता मोबाइल पेज सीधे और पीसी संस्करण में एचटीएमएल, और कविता के बिना मिल चाहते हैं विपरीत, कि सीएसएस की कोई जरूरत नहीं (बजाय इनलाइन शैली), और कम नेटवर्क

का आश्वासन दिया 2.how मैं इसे हल

उपयोग ख मोबाइल या टैबलेट का पता लगाने के लिए rowser उपयोगकर्ता एजेंट, और आपके पास भविष्यवाणी हो सकती है और आपके सर्वर पर प्रस्तुत किया जा सकता है, जब ग्राहक सभी लोड हो जाते हैं, स्क्रीन समाधान पुनः जांचें और यदि आपके पास झूठी भविष्यवाणी हो तो फिर से प्रस्तुत करें।

आप विंडो आकार परिवर्तन और अभिविन्यास बदलने के लिए कॉलबैक बाध्य कर सकते हैं, अपने redux बदल सकते हैं और स्वत:

3.shot आने

कम नेटवर्क प्रस्तुत करना, कम साधन बहुत बहुत कम

झूठी भविष्यवाणी हो सकता है, जब ऐसा होता है तो पृष्ठ

//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() 
 
    }) 
 
}

लोड होने पर पृष्ठ रीफ्रेश हो सकता है 0