मैं अपने वेब पेज को मोबाइल पर ऊंचाई में फिट करने के लिए स्वचालित रूप से आकार बदलने की कोशिश कर रहा हूं। स्क्रीनशॉट के बाईं ओर संस्करण को बिना किसी पैमाने के दिखाता है जबकि दाईं ओर मैंने पृष्ठ को मैन्युअल रूप से स्केल करने के लिए "प्रारंभिक-पैमाने" विशेषता का उपयोग किया है:

screenshots without resize and resized

इस प्रकार मैंने स्क्रीनशॉट के दाईं ओर प्राप्त किया:

<meta name="viewport" content="height=device-height, initial-scale=0.82">

मैं सोच रहा था कि क्या "प्रारंभिक-पैमाने" को मैन्युअल रूप से सेट किए बिना मेरे पृष्ठ के प्रदर्शन को स्वचालित रूप से आकार देने के लिए कोई चाल (एचटीएमएल, सीएसएस, जेएस?) थी? किसी भी संकेत की बहुत सराहना की जाती है, धन्यवाद!

0
Peter Meier 31 पद 2020, 21:45
CSS में html, body { height: 100vh; } जैसा कुछ करने से शरीर को दृश्य ऊंचाई के 100% तक फैला देना चाहिए
 – 
Eric HB
31 पद 2020, 21:50
आपको इस टैग का उपयोग करना चाहिए क्योंकि Google का एल्गोरिथम उन साइटों को दंडित करता है, जो उन्हें मोबाइल के अनुकूल नहीं मानते हैं। लेकिन, आम तौर पर, प्रारंभिक पैमाना 1.0 होना चाहिए, इसलिए सुनिश्चित नहीं है कि आप इसे मोबाइल के लिए छोटा क्यों कर रहे हैं।
 – 
Scott Marcus
31 पद 2020, 21:52
मैंने पहले ही कोशिश की है, दुर्भाग्य से, ऐसा कोई प्रभाव नहीं पड़ता है?
 – 
Peter Meier
31 पद 2020, 22:00
मुझे प्रारंभिक-पैमाने = 1 का उपयोग करना अच्छा लगेगा - जिस तरह से मैंने किया वह सिर्फ एक गंदा कामकाज था क्योंकि मुझे कोई बेहतर नहीं पता था
 – 
Peter Meier
31 पद 2020, 22:00
क्या होगा यदि आपने html, body { height: 82vh; } और inital-scale=1 अपने इच्छित पैमाने के अनुरूप करने के लिए किया?
 – 
Eric HB
31 पद 2020, 22:03

1 उत्तर

सबसे बढ़िया उत्तर

आप जावास्क्रिप्ट के साथ प्रारंभिक-पैमाने को बदल सकते हैं, लेकिन पृष्ठ परिवर्तन को फिर से प्रस्तुत नहीं करेगा। इस मामले में, मैं CSS स्केल प्रॉपर्टी के साथ प्रयोग करूंगा।

  1. सामग्री के साथ मुख्य कंटेनर को कुछ आईडी दें। (उदाहरण के लिए आईडी = "सामग्री")
  2. स्क्रिप्ट फ़ाइल जोड़ें (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();

  1. अपने html में स्क्रिप्ट टैग जोड़ें
<script src="resize.js"></script>

यह समाधान क्या करता है ईवेंट का आकार बदलने के लिए श्रोता जोड़ें। यदि आप विंडो आयामों को बदलते हैं, तो आकार बदलें चलेगा।

यह सामग्री तत्व प्राप्त करता है, सीएसएस सेट करता है (आप इसे दस्तावेज़ शीर्ष में <style></style> टैग के बीच भी सेट कर सकते हैं), फिर श्रोता जोड़ा जाता है। आकार बदलने पर, फ़ंक्शन recalculateScale चलता है।

यह window ऊंचाई प्राप्त करेगा और सामग्री को कुछ अनुपात में स्केल करने के लिए सीएसएस ट्रांसफॉर्म प्रॉपर्टी सेट करेगा। मैंने windowHeight/content.offsetHeight की कोशिश की, जो सामग्री कंटेनर ऊंचाई से विभाजित विंडो ऊंचाई है। सर्वोत्तम परिणाम प्राप्त करने के लिए आप सूत्र के साथ थोड़ा खेल सकते हैं।

1
Honza Kuchař 31 पद 2020, 22:27