मैं CSS के साथ पूरे वेब पेज को कैसे माप सकता हूं?

153

फ़ायरफ़ॉक्स का उपयोग करके, आप बस दबाकर एक पूरे वेब पेज को बड़ा कर सकते हैं CTRL +। यह क्या करता है आनुपातिक रूप से पूरे वेब पेज (फोंट, चित्र, आदि) को बड़ा करता है।

मैं सीएसएस का उपयोग करके समान कार्यक्षमता को कैसे दोहरा सकता हूं?

क्या ऐसा कुछ है page-size: 150%(जो पूरे पृष्ठ भाग को x% तक बढ़ा देगा?)

html css resize

— आईजे केनेडी
स्रोत

7

फ़ायरफ़ॉक्स का पेज जूम फीचर हर आधुनिक ब्राउज़र में दिखाई देता है - इसकी नकल करते हुए लगता है कि यह बेकार है।

— क्वेंटिन

1

मैं डेविड से सहमत हूं। ऐसा लगता है कि इसे दोहराने के लिए व्यर्थ लगता है क्योंकि ब्राउज़र अब दिनों में इस सुविधा में बनाया गया है ...

— उपयोगकर्ता

5

यह वास्तव में मोबाइल उपकरणों के लिए एक अविश्वसनीय रूप से उपयोगी सुविधा होगी। बहुत सारे फोन अब अंतर को समायोजित किए बिना (iPhone4 से, निश्चित रूप से) अपने PPI को बढ़ा रहे हैं।

— डीए।

38

इसकी प्रतिकृति नहीं है। यह एक एम्बेडेड div में एक पृष्ठ / तत्व पूर्वावलोकन की तरह कुछ के लिए उपयोगी हो सकता है।

— रिचीह

3

पेज डिज़ाइनर को अपने पेज के लिए डिफ़ॉल्ट ज़ूम सेट करने में सक्षम होना चाहिए। मेरे पास एक ऐसा पृष्ठ है जो मैंने इसे बनाते समय बड़ा था, लेकिन अब उच्च रिज़ॉल्यूशन डिस्प्ले के कारण छोटा है: lonniebest.com/CardTrick पृष्ठ को रीमेक करने के बजाय, मैं डिफ़ॉल्ट रूप से ज़ूम करना चाहूंगा।

— लोनी बेस्ट

182

आप CSS zoomप्रॉपर्टी का उपयोग करने में सक्षम हो सकते हैं - IE 5.5+, ओपेरा और सफारी 4, और क्रोम में समर्थित

क्या मैं उपयोग कर सकता हूं: सीएसएस ज़ूम

फ़ायरफ़ॉक्स एकमात्र प्रमुख ब्राउज़र है जो ज़ूम ( बगज़िला आइटम ) का समर्थन नहीं करता है, लेकिन आप फ़ायरफ़ॉक्स 3.5 में "मालिकाना" -मोज़-ट्रांसफ़ॉर्म संपत्ति का उपयोग कर सकते हैं ।

तो आप उपयोग कर सकते हैं:

div.zoomed { 
    zoom: 3; 
    -moz-transform: scale(3); 
    -moz-transform-origin: 0 0;
}

— जॉन गैलोवे
स्रोत

1

मालिकाना ज़ूम संपत्ति केवल IE द्वारा समर्थित है। reference.sitepoint.com/css/zoom#compatibilitysection

— क्वेंटिन

15

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

— जॉन गैलोवे

3

नोट: मुझे लगता है कि अन्य समाधान जो प्रस्तावित किए गए हैं - जैसे कि एम और% आधारित स्केलिंग - अधिक "शुद्ध" हैं लेकिन जरूरी नहीं कि अधिकांश वेब लेआउट पर व्यावहारिक हों जब तक कि आपने स्क्रैच से उस तरह का निर्माण नहीं किया है।

— जॉन गैलोवे

1

मैंने ओपेरा 10b2 का परीक्षण किया है और यह इसका समर्थन नहीं करता है। फ़ायरफ़ॉक्स रात्रिकालीन रूप से अजीब व्यवहार करता है (ज़ूम किए गए टुकड़े गायब हो जाते हैं)। IE5 / 6 छोटी गाड़ी हैं। WebKit में ही ठीक काम करता है।

— कोर्नेल जूएल 22'09

2

धन्यवाद जॉन, महान जानकारी! फ़ायरफ़ॉक्स में -मोज़-ट्रांसफ़ॉर्म स्केल वास्तव में काम करता है, लेकिन आपके उपयोग के मामले के आधार पर आपको -moz-transform-Origin (cfr। डेवलपर .m.millailla.org/En/CSS/-moz-ransformform) का उपयोग करके तत्व की स्थिति को सही करने की आवश्यकता हो सकती है। -origin )

— futtta

81

यह एक देर से जवाब है, लेकिन आप उपयोग कर सकते हैं

body {
   transform: scale(1.1);
   transform-origin: 0 0;
   // add prefixed versions too.
}

पृष्ठ को 110% तक ज़ूम करने के लिए। हालांकि zoomशैली वहाँ है, फ़ायरफ़ॉक्स अभी भी दुःख का समर्थन नहीं करता है।

इसके अलावा, यह आपके ज़ूम से थोड़ा अलग है। css transformएक छवि ज़ूम की तरह नहीं पुनर्प्रवाहित कारण, आदि काम करता है, तो यह आपके पेज लेकिन विस्तार होगा

ट्रांसफॉर्म मूल को संपादित करें ।

— kumarharsh
स्रोत

1

इसके लिए धन्यवाद, लेकिन आपको घोषणाओं के बीच कुछ अर्धविरामों की आवश्यकता है। इसके अलावा, जब मैंने यह कोशिश की कि पृष्ठ बाईं ओर स्थानांतरित हो जाए, तो बाईं ओर का मार्जिन, ताकि पृष्ठ का बायाँ भाग अब दिखाई न दे। विभिन्न संबंधित "... परिवर्तन-उत्पत्ति: 0 0" घोषणाओं को जोड़ा गया है।

— डेव बर्टन

हां, मुझे इस बात का उल्लेख करना चाहिए कि सामग्री के साथ क्लिप किया गया है transform। टिप्पणी के लिए धन्यवाद।

— कुमारहर्ष

1

मैं @ बर्टन से सहमत हूं: transform-origin: 0 0;मैं जो चाहता हूं उसका उपयोग करता हूं। उदाहरण के लिए, पृष्ठ को 150% तक ज़ूम करने के लिए transform: scale(1.5); transform-origin: 0 0;:। मेरा मानना है कि @kumar_harsh का अन्यथा अच्छा उत्तर सही होना चाहिए।

— काई कार्वर

यदि आप इस विधि का उपयोग करते हैं तो @KaiCarver , यह हमेशा क्लिपिंग में परिणाम देगा। कोई फर्क नहीं पड़ता कि आप किस बिंदु का उपयोग करते हैं transform-origin। मैंने जो लिखा है वह केवल एक उदाहरण है कि किस मूल्य का उपयोग करना है। यदि आप transform-origin: 0 0अपने उपयोग-मामले के अनुरूप हैं (या यदि आप नीचे-दाएं कोने में क्या है, इसकी परवाह नहीं करते हैं, तो आप निश्चित रूप से उपयोग करने के लिए स्वतंत्र हैं

— कुमारहर्ष

@AngularM क्या आप व्यवहार दिखाने के लिए एक कोड स्निपेट साझा कर सकते हैं? मुझे यकीन है कि इसके लिए कुछ और कारण है।

— कुमारहर्ष

18

यदि आपका CSS पूरी तरह से exया emइकाइयों के आसपास निर्मित है , तो यह संभव और संभव हो सकता है। आपको सिर्फ या इसके font-size: 150%लिए अपनी शैली में घोषणा करने की आवश्यकता होगी । यह आनुपातिक रूप से हर दूसरी लंबाई का कारण होना चाहिए। आप इस तरह से छवियों को स्केल नहीं कर सकते, जब तक कि उन्हें एक शैली भी नहीं मिलती।bodyhtml

लेकिन यह एक बहुत बड़ा है अगर ज्यादातर साइटों पर, वैसे भी।

— एक छोटा सा सिक्का
स्रोत

3

यह केवल मेरे फोंट के आकार को बदल देगा। CTRL + प्रपोज़ल निश्चित चौड़ाई, ऊँचाई और छवि आकार भी विस्तृत करता है।

2

मुझे पता है, लेकिन यह उतना ही करीब है जितना कि आप शुद्ध सीएसएस के साथ प्राप्त कर सकते हैं। इसके अलावा न केवल आपके फोंट बदलते हैं, बल्कि सब कुछ जहां आयाम फ़ॉन्ट के आकार के कई के रूप में निर्दिष्ट होते हैं। मतलब, वह सब कुछ जहाँ आपने इस्तेमाल किया था %, emया exइकाइयाँ।

— जॉय

1

यह सिर्फ सही नहीं है। मैंने नीचे सूचीबद्ध समाधान (ज़ूम + -मोज़-ट्रांसफ़ॉर्म गुण) का परीक्षण किया है, और यह FF3.5, IE6 +, Safari और ओपेरा पर काम करता है। यह चित्रों के साथ-साथ पाठ को भी मापता है। आप CSS में पेजों को स्केल कर सकते हैं।

— जॉन गैलोवे

6

जैसा कि जोहान्स कहते हैं - उनके जवाब पर सीधे टिप्पणी करने के लिए पर्याप्त प्रतिनिधि नहीं है - आप वास्तव में ऐसा तब तक कर सकते हैं जब तक कि सभी तत्व "" आयाम फ़ॉन्ट के आकार के कई के रूप में निर्दिष्ट किए जाते हैं। मतलब, वह सब कुछ जहां आप%, em या ex का उपयोग करते हैं। इकाइयों "। हालांकि मुझे लगता है कि% तत्व से युक्त होते हैं, न कि फ़ॉन्ट-आकार के।

और आप आम तौर पर छवियों के लिए इन सापेक्ष इकाइयों का उपयोग नहीं करेंगे, यह देखते हुए कि वे पिक्सेल से बने होते हैं, लेकिन एक चाल है जो इसे बहुत अधिक व्यावहारिक बनाती है।

यदि आप परिभाषित करते हैं body{font-size: 62.5%};तो 1em 10px के बराबर होगा। जहाँ तक मुझे पता है यह सभी मुख्य ब्राउज़रों में काम करता है।

फिर आप अपनी (जैसे) 100px वर्ग छवियों को निर्दिष्ट कर सकते हैं width: 10em; height: 10em;और फ़ायरफ़ॉक्स के स्केलिंग को डिफ़ॉल्ट मान सकते हैं, चित्र उनका प्राकृतिक आकार होगा।

बनाओ body{font-size: 125%};और सब कुछ - छवियों सहित - डबल मूल आकार हो wil।

— e100
स्रोत

मुझे समझ में नहीं आता, अगर मैं कहता हूं कि शरीर {फ़ॉन्ट-आकार: 62.5%; फ़ॉन्ट-आकार: 125%} - कि 1em को 10px कैसे परिभाषित किया जाएगा। क्या ब्राउज़र केवल पहले फ़ॉन्ट-आकार की घोषणा को अनदेखा कर सकता है और फिर बस 125% = 10px बना सकता है?

मुझे लगता है कि आपने गलत समझा। आप एक ही समय में दोनों नहीं करेंगे। 62.5 x2 = 125 ... यह दिखाने के लिए कि आप किस तरह से मूल्य समायोजित करके चीजों को स्केल कर सकते हैं।

— एपे-इनोगो

हां। मुझे कहना चाहिए 'तब यदि आप बॉडी को सेट करने के लिए जावास्क्रिप्ट का उपयोग करते हैं {font-size: 125%} सभी पेज एलिमेंट्स आकार में दोगुने हो जाएंगे'।

— 100

3

इस कोड के साथ 1em या 100% शरीर की ऊंचाई के 1% के बराबर होगा

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"

— सेड्रिक ऑस्टेन-ब्राउन
स्रोत

2

 * {
transform: scale(1.1, 1.1)
}

यह पृष्ठ पर हर तत्व को बदल देगा

— रुषभ सोोनी
स्रोत

1

जॉन टैन ने अपनी साइट के साथ यह किया है - http://jontangerine.com/ छवियों सहित सब कुछ ईम्स में घोषित किया गया है। सब कुछ। इस प्रकार वांछित प्रभाव प्राप्त होता है। टेक्स्ट जूम और स्क्रीन जूम लगभग एक ही परिणाम प्राप्त करते हैं।

— एंडी फोर्ड
स्रोत

1

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

— T0xicCode
स्रोत

यह एक मानक ब्राउज़र सुविधा है, लेकिन इस सुविधा को सीधे साइट पर जोड़ने का मतलब है कि आपको अपनी पसंद के ब्राउज़र के साथ (1) उपयोगकर्ता की विशेषज्ञता पर भरोसा नहीं करना है और (2) ब्राउज़र-विशिष्ट निर्देश

— Ags1

1

मेरे पास निम्नलिखित कोड है जो CSS गुणों के माध्यम से पूरे पृष्ठ को मापता है। महत्वपूर्ण बात यह है कि क्षैतिज स्क्रॉलिंग से बचने के लिए ज़ूम के व्युत्क्रम में body.style. उपलब्धता सेट करें। आपको विंडो के शीर्ष पर दस्तावेज़ के शीर्ष बाईं ओर रखने के लिए ट्रांसफ़ॉर्म-मूल को ऊपर बाईं ओर सेट करना होगा।

        var zoom = 1;
        var width = 100;

        function bigger() {
            zoom = zoom + 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }
        function smaller() {
            zoom = zoom - 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }

— Ags1
स्रोत