मैं अपने वेब पेज को मोबाइल पर ऊंचाई में फिट करने के लिए स्वचालित रूप से आकार बदलने की कोशिश कर रहा हूं। स्क्रीनशॉट के बाईं ओर संस्करण को बिना किसी पैमाने के दिखाता है जबकि दाईं ओर मैंने पृष्ठ को मैन्युअल रूप से स्केल करने के लिए "प्रारंभिक-पैमाने" विशेषता का उपयोग किया है:
इस प्रकार मैंने स्क्रीनशॉट के दाईं ओर प्राप्त किया:
<meta name="viewport" content="height=device-height, initial-scale=0.82">
मैं सोच रहा था कि क्या "प्रारंभिक-पैमाने" को मैन्युअल रूप से सेट किए बिना मेरे पृष्ठ के प्रदर्शन को स्वचालित रूप से आकार देने के लिए कोई चाल (एचटीएमएल, सीएसएस, जेएस?) थी? किसी भी संकेत की बहुत सराहना की जाती है, धन्यवाद!
1 उत्तर
आप जावास्क्रिप्ट के साथ प्रारंभिक-पैमाने को बदल सकते हैं, लेकिन पृष्ठ परिवर्तन को फिर से प्रस्तुत नहीं करेगा। इस मामले में, मैं CSS स्केल प्रॉपर्टी के साथ प्रयोग करूंगा।
- सामग्री के साथ मुख्य कंटेनर को कुछ आईडी दें। (उदाहरण के लिए आईडी = "सामग्री")
- स्क्रिप्ट फ़ाइल जोड़ें (resize.js कहें)
const content = document.querySelector('#content');
content.style.transformOrigin = 'top left';
window.addEventListener('resize', recalculateScale);
function recalculateScale() {
const windowHeight = window.innerHeight;
content.style.transform = `scale(${windowHeight / content.offsetHeight})`;
}
recalculateScale();
- अपने html में स्क्रिप्ट टैग जोड़ें
<script src="resize.js"></script>
यह समाधान क्या करता है ईवेंट का आकार बदलने के लिए श्रोता जोड़ें। यदि आप विंडो आयामों को बदलते हैं, तो आकार बदलें चलेगा।
यह सामग्री तत्व प्राप्त करता है, सीएसएस सेट करता है (आप इसे दस्तावेज़ शीर्ष में <style></style> टैग के बीच भी सेट कर सकते हैं), फिर श्रोता जोड़ा जाता है। आकार बदलने पर, फ़ंक्शन recalculateScale चलता है।
यह window ऊंचाई प्राप्त करेगा और सामग्री को कुछ अनुपात में स्केल करने के लिए सीएसएस ट्रांसफॉर्म प्रॉपर्टी सेट करेगा। मैंने windowHeight/content.offsetHeight की कोशिश की, जो सामग्री कंटेनर ऊंचाई से विभाजित विंडो ऊंचाई है। सर्वोत्तम परिणाम प्राप्त करने के लिए आप सूत्र के साथ थोड़ा खेल सकते हैं।
html, body { height: 100vh; }जैसा कुछ करने से शरीर को दृश्य ऊंचाई के 100% तक फैला देना चाहिएhtml, body { height: 82vh; }औरinital-scale=1अपने इच्छित पैमाने के अनुरूप करने के लिए किया?