एक पृष्ठ को गतिशील रूप से स्केल करने का सबसे अच्छा तरीका?

Question

मैं सोच रहा था कि आप लोग और गैल्स क्या सबसे अधिक कुशलता के रूप में सिफारिश करेंगे कि संकल्प के आधार पर वेबसाइट को गतिशील रूप से पुन: सहेजना चाहते हैं?

कुछ ऐसा है जिसे तत्वों और छवियों rescales है? या मुझे अलग से ऐसा करने की ज़रूरत है? मैं प्रतिशत और एम का उपयोग करने की कोशिश कर रहा हूं, लेकिन यह एक बड़ी परेशानी की तरह लगता है। क्या कोई स्क्रिप्ट है? मैं थोड़ी देर के लिए खोज कर रहा हूं और अभी तक कुछ भी नहीं मिला है जो काफी फिट बैठता है।

Answer 1

नया Media QueriesCSS3 विनिर्देशन में उतरा है। आप एक भयानक article विषय परसे एक सूची के अलावा पत्रिका (example साथ, अपने ब्राउज़र विंडो का आकार बदलने की कोशिश) पढ़ सकते हैं

वहाँ भी निश्चित रूप से scripts मौजूदा कर रहे हैं।

Answer 2

उपकरण के ओरिएंटेशन पता लगाने के लिए सबसे अच्छा तरीका है मेटा टैग का उपयोग कर रहा है। वेब पेज को प्रदर्शित करने का तरीका निर्धारित करने के लिए आईफोन और आईपैड पर सफारी/क्रोम द्वारा व्यूपोर्ट मेटा टैग का उपयोग किया जाता है। बाद

<meta name="viewport" content="width=device-width"> 

1,0 के लिए प्रारंभिक पैमाने सेट करने के लिए अपनी HTML फ़ाइल के सिर करने के लिए निम्नलिखित घोषणा जोड़कर व्यूपोर्ट

डिवाइस की चौड़ाई के व्यूपोर्ट चौड़ाई के गुणों कर रहे हैं, में जोड़ना अपनी HTML फ़ाइल के सिर:

<meta name="viewport" content="initial-scale=1.0"> 

, प्रारंभिक पैमाने सेट करने के लिए और उपयोगकर्ता स्केलिंग बंद करने के लिए अपनी HTML फ़ाइल के सिर से जोड़ें:

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

पूर्ण स्क्रीन मोड

<meta name="apple-mobile-web-app-capable" content="yes"> 

सामग्री हाँ वेब अनुप्रयोग पूर्ण स्क्रीन मोड में चलाता है पर सेट है; अन्यथा, यह नहीं करता है। आप यह निर्धारित कर सकते हैं कि windows.navigator.standalone केवल-पढ़ने वाली बूलियन जावास्क्रिप्ट प्रॉपर्टी का उपयोग करके पूर्ण-स्क्रीन मोड में वेबपृष्ठ प्रदर्शित होता है या नहीं।