CSS3 100vh मोबाइल ब्राउज़र में स्थिर नहीं है

Question

मेरे पास एक बहुत ही अजीब मुद्दा है ... प्रत्येक ब्राउज़र और मोबाइल संस्करण में मुझे इस व्यवहार का सामना करना पड़ा:

• जब आप पेज को स्क्रॉल करना शुरू करते हैं तो पेज लोड करने पर (उदाहरण के लिए पता बार दिखाते हुए) सभी ब्राउज़रों का एक शीर्ष मेनू होता है।
• 100vh की गणना कभी-कभी केवल व्यूपोर्ट के दृश्य भाग पर की जाती है, इसलिए जब ब्राउज़र बार 100vh बढ़ता है (पिक्सल के संदर्भ में)
• आयाम बदलने के बाद से सभी लेआउट फिर से पेंट और फिर से समायोजित
• उपयोगकर्ता अनुभव के लिए एक बुरा उछल प्रभाव

इस समस्या से कैसे बचा जा सकता है? जब मैंने पहली बार व्यूपोर्ट-ऊँचाई के बारे में सुना था तो मैं उत्साहित था और मुझे लगा कि मैं इसे जावास्क्रिप्ट का उपयोग करने के बजाय निश्चित ऊंचाई वाले ब्लॉकों के लिए उपयोग कर सकता हूं, लेकिन अब मुझे लगता है कि ऐसा करने का एकमात्र तरीका वास्तव में जावास्क्रिप्ट के साथ कुछ आकार बदलने की घटना है ...

आप इस समस्या को देख सकते हैं: नमूना साइट

किसी ने मुझे एक सीएसएस समाधान के साथ / मदद कर सकते हैं?

---

सरल परीक्षण कोड:

/* maybe i can track the issue whe it occours... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0; padding:0; }

/*
  this is the box which should keep constant the height...
  min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
  min-height:100vh;
  position:relative;
}

.vhbox .t{
  display:table;
  position:relative;
  width:100%;
  height:100vh;
}

.vhbox .c{
  height:100%;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

<div class="vhbox" style="background-color:#c00">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
    <br>
    <!-- this input highlight if resize event is fired -->
    <input type="text" id="currenth">
  </div></div>
</div>

<div class="vhbox" style="background-color:#0c0">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
  </div></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Comments

अगर मुझे यह अच्छी तरह से समझ में आ गया है कि आप जिस समस्या का सामना कर रहे हैं, वह मोबाइल ब्राउज़र में है, तो दृश्य व्यूपोर्ट हाईट से अधिक है?

— गौरव अग्रवाल

दिलचस्प है, कि पहले कभी नहीं देखा। इसका मुख्य रूप से बैकग्राउंड पिक्चर है जो काफ़ी उछल-कूद करता है। transition: 0.5sबदलाव को कम करने के लिए आप कैसे या तो इसे जोड़ते हैं ?

— C14L

@GauravAggarwal nope, इसके विपरीत: वास्तविक व्यूपोर्ट की ऊँचाई ब्राउज़र द्वारा प्रदत्त एक से अधिक है जब इसका पता बार दिखाई दे रहा है ...

— नेरो कोस्टाकुरता

चूंकि मेरा सवाल लोकप्रिय हो रहा है, मैं अपने 5 सेंट देना चाहूंगा: असली खिड़की की ऊंचाई को मेन्टेन करने के लिए अधिक बुद्धिमान नहीं होगा और केवल मेनू बार को स्लाइड करेगा? यह इतना मुश्किल नहीं लगता। वास्तव में आसान होना चाहिए ... उंगली ऊपर -> मेनू बार स्लाइड तक अदृश्य, नीचे उंगली -> मेनू बार नीचे स्लाइड करें जब तक कि पूरी तरह से दिखाई न दे ... सभी पूरी तरह से शरीर के साथ फिर से समायोजन और उछल प्रभाव के बिना ...

— नीरो कोस्टाकुर्ता

Google के पास इस बारे में कुछ अच्छी जानकारी है: Developers.google.com/web/updates/2016/12/url-bar-resizing आप 100v के बजाय 100% का उपयोग कर सकते हैं यदि आपने शरीर की ऊंचाई 100% तक बदल दी है

— Benisburgers

Answer 1

दुर्भाग्य से यह जानबूझकर है ...

यह एक अच्छी तरह से ज्ञात मुद्दा है (कम से कम सफारी मोबाइल में), जो जानबूझकर है, क्योंकि यह अन्य समस्याओं को रोकता है। बेंजामिन पौलेन ने एक वेबकिट बग का जवाब दिया :

यह पूरी तरह से जानबूझकर है। इस प्रभाव को हासिल करने के लिए हमारी ओर से काफी काम किया गया। :)

आधार समस्या यह है: जैसे ही आप स्क्रॉल करते हैं, दृश्यमान क्षेत्र बदल जाता है। अगर हम तदनुसार सीएसएस व्यूपोर्ट ऊंचाई को अपडेट करते हैं, तो हमें स्क्रॉल के दौरान लेआउट को अपडेट करना होगा। न केवल यह गंदगी की तरह दिखता है, बल्कि 60 एफपीएस पर ऐसा करना व्यावहारिक रूप से अधिकांश पृष्ठों में असंभव है (60 एफपीएस आईओएस पर आधारभूत फ्रैमरेट है)।

आपको "बकवास जैसा दिखता है" भाग दिखाना मुश्किल है, लेकिन कल्पना करें जैसे ही आप स्क्रॉल करते हैं, सामग्री चलती है और आप स्क्रीन पर जो चाहते हैं वह लगातार स्थानांतरित हो रहा है।

गतिशील रूप से ऊंचाई को अद्यतन करने से काम नहीं हो रहा था, हमारे पास कुछ विकल्प थे: iOS पर व्यूपोर्ट इकाइयों को छोड़ दें, iOS 8 से पहले दस्तावेज़ के आकार से मेल खाएं, छोटे दृश्य आकार का उपयोग करें, बड़े दृश्य आकार का उपयोग करें।

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

निकोलस होइजे ने इस पर काफी शोध किया है: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-vanish-part-of-the-document-in-some-mobile -browsers.html

कोई नियत योजना नहीं

इस बिंदु पर, मोबाइल उपकरणों पर व्यूपोर्ट ऊंचाई का उपयोग करने से बचना बहुत कुछ नहीं है। क्रोम ने 2016 में इसे बदल दिया:

• https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BK0oHURgmJ4
• https://developers.google.com/web/updates/2016/12/url-bar-resizing

Comments

हां, जैसा कि मुझे लगता है। केवल व्यवहार्य समाधान एक स्क्रिप्टेड समाधान है। जो मैं जानता हूं, $(window).height()वह इस बग से प्रभावित नहीं है, इसलिए मैं इस रास्ते से जाऊंगा। धन्यवाद!

— नेरो कोस्टाकुर्टा

स्क्रिप्ट मेरे लिए एकमात्र रास्ता था, और पूरी तरह से काम किया।

— 17

सबसे अवसादपूर्ण जवाब कभी।

— विनम्यूका

चूंकि Chrome संस्करण 56 vh की गणना हमेशा की जाती है जैसे कि URL बार छिपा होता है और इसलिए vh स्क्रॉल पर नहीं बढ़ता है, सिवाय इसके position:fixed। यह सफारी पर कार्यान्वयन के समान है। और पढ़ें: Developers.google.com/web/updates/2016/12/url-bar-resizing

— केविन फ़रुगिया

नवीनतम Chrome प्रारंभिक लोड के बाद परिवर्तित नहीं होता है vhया <html> 100%ऊँचाई पर नहीं होता है। यह वास्तव में बहुत अच्छा है - जब URL बार छुपाता भयानक दिख सकता है तो लेआउट थ्रैशिंग / रिफ्लो। Firefoxऔर Edge Mobileअभी भी प्रभावी रूप से अपडेट vhऔर <html>ऊंचाई, फाड़ के बहुत सारे के कारण और जब स्क्रॉल सभी घटकों के आकार बदलने, विशेष रूप से बुरा पृष्ठभूमि छवियों के लिए SVGs का उपयोग कर यदि

— Drenai

Answer 2

आप min-height: -webkit-fill-available;इसके बजाय अपने सीएसएस में कोशिश कर सकते हैं 100vh। इसे हल किया जाना चाहिए

Comments

मैं min-height: 100vh;एक कमबैक के रूप में छोड़ूँगा जहाँ -webkit-fill-availableसमर्थित नहीं है।

— टैमी टी

वाह धन्यवाद!! इसके साथ मुझे अब "प्रतिक्रिया-div-100vh" की आवश्यकता नहीं है!

— एंड्रेस एलिसंडो

सबसे उपयोगी जवाब!

— गौथियर

@ टैमीटीई सही है, इसे min-height: 100vh;वहां रखना बेहतर है क्योंकि यह अन्यथा फ़ायरफ़ॉक्स जैसे ब्राउज़र पर टूट जाएगा (कम से कम डेस्कटॉप पर, आईओएस वेबकिट का उपयोग करता है चाहे कोई भी ब्राउज़र हो)।

— जोनी वीआर

यह एक बहुत अच्छा समाधान था, लेकिन ऐसा लगता है कि आईओएस 13 में बदल गया है - मैं पहले खंड के निचले भाग में अतिरिक्त स्थान देख रहा हूं, लेकिन यह ठीक उसी तरह से काम करता है जैसा कि आईओएस के लिए सफारी में किया जाता है। 12.x कोडपीन ।io/ RwwL/ pen / PowjvPq (आपको इसे फोर्क करना होगा फिर इसे iOS पर कोडपैन डिबग मोड में देखना होगा कि वास्तव में मेरा क्या मतलब है)।

— RwwL

Answer 3

अपने ऐप में मैं इसे पसंद करता हूं (टाइपस्क्रिप्ट और नेस्टेड पोस्टपेक्स, इसलिए कोड को तदनुसार बदल दें):

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

अपनी सीएसएस में:

:root {
   --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;

    @media not all and (hover:hover) {
        height: var(--app-height);
    }
}

यह कम से कम क्रोम मोबाइल और आईपैड पर काम करता है। जब आप iOS पर होमस्क्रीन पर अपने ऐप को जोड़ते हैं और कुछ बार ओरिएंटेशन बदलते हैं, तो यह काम नहीं करता है - किसी तरह ज़ूम इनहाइट वैल्यू के साथ जूम का स्तर गड़बड़ हो जाता है, अगर मुझे इसका हल मिल जाए तो मैं एक अपडेट पोस्ट कर सकता हूं।

डेमो

Comments

यह वास्तव में एक बहुत ही कष्टप्रद समस्या के लिए एक शानदार दृष्टिकोण है।

— माइकल जियोवानी पुमो

मैं एक चेतावनी जोड़ना चाहूंगा कि "@मीडिया सभी और (होवर: होवर) {" मोबाइल ब्राउज़रों का पता लगाने के लिए बुलेटप्रूफ तरीका नहीं है। कुछ और उपयोग करने के लिए स्वतंत्र महसूस करें।

— एंड्रियास हेरड

मुझे यह दृष्टिकोण बहुत पसंद है। एक टिप्पणी मैं घटना श्रोता के उपयोग पर है। इसके कारण पृष्ठ का पुन: रंग हो जाता है और मैं केवल कुछ परिदृश्यों में इसका उपयोग करता हूं जब उपयोगकर्ता के लिए सही व्यूपोर्ट (अर्थात होम पेज प्रारंभिक दृश्य) देखना महत्वपूर्ण होता है

— Zach Gollwitzer

Answer 4

जिन साइटों का मैं निर्माण करता हूं उनमें से कई के लिए ग्राहक 100vh बैनर के लिए पूछेगा और जैसा कि आपने पाया है, यह तब होता है जब आप स्क्रॉल करना शुरू करते हैं तो मोबाइल पर एक बुरा "उछल" अनुभव होता है। यह है कि मैं सभी उपकरणों में एक सुसंगत सुसंगत अनुभव के लिए समस्या का समाधान करता हूं:

मैंने पहली बार अपने बैनर तत्व CSS को सेट किया height:100vh

फिर मैं अपने बैनर तत्व के पिक्सल में ऊंचाई पाने के लिए jQuery का उपयोग करता हूं और इस ऊंचाई का उपयोग करके इनलाइन शैली लागू करता हूं।

var viewportHeight = $('.banner').outerHeight();
$('.banner').css({ height: viewportHeight });

ऐसा करने से मोबाइल उपकरणों पर समस्या का समाधान हो जाता है जब पृष्ठ लोड होता है, बैनर तत्व CSS का उपयोग करके 100vh पर सेट किया जाता है और फिर jQuery इस को मेरे बैनर तत्व पर इनलाइन CSS डालकर ओवरराइड करता है जो उपयोगकर्ता द्वारा स्क्रॉल करने पर इसे आकार बदलने से रोकता है।

हालाँकि, डेस्कटॉप पर यदि कोई उपयोगकर्ता अपने ब्राउज़र विंडो का आकार बदलता है, तो मेरा बैनर तत्व आकार परिवर्तन नहीं करेगा, क्योंकि यह अब ऊपर दिए गए jQuery के कारण पिक्सेल में एक निश्चित ऊंचाई सेट है। इसे संबोधित करने के लिए मैं अपने दस्तावेज़ के मुख्य भाग में एक 'मोबाइल' वर्ग जोड़ने के लिए मोबाइल डिटेक्ट का उपयोग करता हूं। और फिर मैं एक बयान में उपरोक्त jQuery लपेटें:

if ($('body').hasClass('mobile')) {
  var viewportHeight = $('.banner').outerHeight();
  $('.banner').css({ height: viewportHeight });
}

परिणामस्वरूप, यदि कोई उपयोगकर्ता किसी मोबाइल डिवाइस पर है, तो मेरे पृष्ठ के मुख्य भाग पर 'मोबाइल' मौजूद है और ऊपर jQuery निष्पादित किया गया है। इसलिए मेरा बैनर तत्व केवल मोबाइल उपकरणों पर इनलाइन सीएसएस को लागू करेगा, इस बीच डेस्कटॉप पर मूल 100vh CSS नियम बना रहेगा।

Comments

मैं इसे $('.banner').css({ height: window.innerHeight });बदले में उपयोग करने के लिए ट्विक करूंगा , जो व्यूपोर्ट की "वास्तविक" ऊंचाई है। इनरहाइट काम कैसे करता है इसका उदाहरण

— मार्टिन

जो document.querySelector('.banner').style.height = window.innerHeight;वास्तविक जावास्क्रिप्ट लिखने वाले लोगों के लिए है।

— फाबियन वॉन एलर्ट्स

Answer 5

इस उत्तर को देखें: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

// We listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

body {
  background-color: #333;
}

.module {
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  max-width: 30%;
}

.module__item {
  align-items: center;
  display: flex;
  height: 20%;
  justify-content: center;
}

.module__item:nth-child(odd) {
  background-color: #fff;
  color: #F73859;
}

.module__item:nth-child(even) {
  background-color: #F73859;
  color: #F1D08A;
}

<div class="module">
  <div class="module__item">20%</div>
  <div class="module__item">40%</div>
  <div class="module__item">60%</div>
  <div class="module__item">80%</div>
  <div class="module__item">100%</div>
</div>

Comments

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

— जूलियो वेदोवट्टो

बहुत अच्छा समाधान। बस मेरे मामले में, मैंने पोनीफिल का उपयोग नहीं किया, बल्कि तर्क दिया कि सभी डेस्कटॉप साइटों के लिए मैं 100vh का उपयोग करता हूं, जबकि मोबाइल के लिए मैं var का उपयोग करता हूं (हमारे पास मोबाइल दुनिया में IE11 नहीं है)।

— FrEaKmAn

केवल समाधान जो नेस्टेड तत्वों के लिए काम किया। किसी और में कुछ सौ उदाहरणों को बदलना होगा, आप कम से कम (अधिकतर समय) regexx (- (?)? ([\ D।] +) से मिलान कर सकते हैं और इसे कैल्क (var (- vh) * से बदल सकते हैं) $ 1 $ 2)

— ecc521

Answer 6

मैं के साथ आया एक प्रतिक्रिया घटक - यह बाहर की जाँच अगर आप प्रतिक्रिया या उपयोग स्रोत कोड ब्राउज़ यदि आप नहीं करते हैं, तो आप इसे अपने पर्यावरण के लिए अनुकूलित कर सकते हैं।

यह फुलस्क्रीन डिव की ऊँचाई को निर्धारित करता है window.innerHeightऔर फिर इसे विंडो आकार में अपडेट करता है।

Comments

सभी नायक टोपी नहीं पहनते हैं। आप ठीक हैं जैसे कि। आपका बहुत बहुत धन्यवाद। समय की बचत की।

— नारायण

और Vue प्रेमियों के लिए ... github.com/razumnyak/vue-div-100vh

— टोनी ओ'हागन

Answer 7

जैसा कि मैं कुछ दिनों से एक समाधान की तलाश में था, यहाँ VuJS के साथ VueJS का उपयोग करने वाले सभी के लिए मेरा है (मेरा समाधान वी-ऐप-बार, वी-नेविगेशन-ड्रॉअर और वी-फुटर का उपयोग करता है): मैंने App.scss (ऐप में उपयोग किया गया) बनाया। निम्नलिखित सामग्री के साथ vue):

.v-application {
    height: 100vh;
    height: -webkit-fill-available;
}

.v-application--wrap {
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
}

Comments

यह अच्छी तरह से काम करता है, और Vue / Vuetify दुनिया के बाहर सामान्यीकृत किया जा सकता है।

— लियो

Answer 8

मेरे लिए इस तरह की चाल ने एक काम किया:

height: calc(100vh - calc(100vh - 100%))

Comments

क्या यह ऊंचाई से भिन्न है: 100%?

— FF_Dev

हां, 100vh एक व्यूपोर्ट ऊंचाई (आपकी डिवाइस) का 100% है, जब शुद्ध 100% केवल सभी उपलब्ध पैरेंट एरिया को भरते हैं (पेरेंट ब्लॉक में उदाहरण के लिए 50px ऊंचाई हो सकती है और यह केवल इस पैरेंट ऊंचाई तक भर जाएगा)। बड़े संक्षेप में।

— पैट्रिक जनिक

Answer 9

@ निल्स ने इसे स्पष्ट रूप से समझाया।

फिर आगे क्या है?

मैं सिर्फ रिश्तेदार 'क्लासिक' (प्रतिशत) का उपयोग करने के लिए वापस चला गया% सीएसएस में ।

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

Comments

ऊंचाई: बैनर के लिए 100% अभी भी मोबाइल ब्राउज़रों पर कूदता है। मैं इसे एंड्रॉइड पर परीक्षण कर रहा हूं, और अब तक क्रोम और ओपेरा मिनी दृश्यमान वीपी ऊंचाई के रूप में 100% देता है, और स्क्रॉल पर नहीं बदलता है। एज और फ़ायरफ़ॉक्स 100% ऊंचाई बदलते हैं, और दृश्य को फिर से दिखाते हैं। फ़ायरफ़ॉक्स विशेष रूप से खराब है, फाड़ के साथ, पाठ फिर से

— चित्रित

@ डैरेन क्या आप सुनिश्चित हैं कि आप इसे सही तरीके से लागू करते हैं? क्या आप यह साबित कर सकते हैं कि jsfiddle.net पर एक छोटा सा उदाहरण है?

— कलमीत

हां, मुझे यकीन है कि :-)

— Drenai

Answer 10

मुझे अभी एक वेब ऐप मिला है जिसका डिज़ाइन मैंने iPhones और iPads के साथ किया है, और विशिष्ट Apple डिवाइस पर लक्षित मीडिया प्रश्नों का उपयोग करके इसे हल करने का सुझाव देने वाला एक लेख मिला है।

मुझे नहीं पता कि मैं उस लेख के कोड को यहां साझा कर सकता हूं, लेकिन पता यह है: http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug

लेख का हवाला देते हुए: "सिर्फ मीडिया प्रश्नों का उपयोग करके डिवाइस की ऊँचाई के साथ तत्व की ऊँचाई का मिलान करें जो iPhone और iPad के पुराने संस्करणों को लक्षित करता है।"

उन्होंने पूरी ऊंचाई वाले तत्वों को अनुकूलित करने के लिए सिर्फ 6 मीडिया क्वेरियाँ जोड़ीं, और यह पूरी तरह से लागू सीएसएस के रूप में काम करना चाहिए।

लंबित संपादित करें: मैं अभी इसका परीक्षण करने में असमर्थ हूं, लेकिन मैं वापस आऊंगा और अपने परिणामों की रिपोर्ट करूंगा।

Comments

अभी भी उन परिणामों की प्रतीक्षा कर रहे हैं 😉

— gman

मुझे खेद है कि मैं वादे के मुताबिक वापस नहीं आया। लेकिन एचटीएमएल और सीएसएस के साथ बहुत लंबे समय तक फ़िदा होने के बाद मुझे पसंद आया, मैंने अपने लेआउट के डिज़ाइन को बदल दिया और एक ऐसा तरीका पाया जिसने मेरी आवश्यकताओं के लिए "ठीक" काम किया, लेकिन एक सार्वभौमिक समाधान नहीं था।

— जाहजिल

Answer 11

जैसा कि मैं नया हूँ, मैं अन्य उत्तरों पर टिप्पणी नहीं कर सकता।

अगर कोई इस काम को करने के लिए एक उत्तर की तलाश में है (और जावास्क्रिप्ट का उपयोग कर सकता है - जैसा कि इस समय इस काम को करने के लिए आवश्यक लगता है) इस दृष्टिकोण ने मेरे लिए बहुत अच्छा काम किया है और यह मोबाइल अभिविन्यास के रूप में अच्छी तरह से बदलता है। मैं उदाहरण कोड के लिए Jquery का उपयोग करता हूं लेकिन वेनिलाजेएस के साथ योग्य होना चाहिए।

-फर्स्ट में, मैं यह पता लगाने के लिए एक स्क्रिप्ट का उपयोग करता हूं कि डिवाइस टच है या होवर। नंगे-हड्डियों का उदाहरण:

if ("ontouchstart" in document.documentElement) {
    document.body.classList.add('touch-device');

} else {
    document.body.classList.add('hover-device');
}

यह डिवाइस प्रकार (होवर या टच) के अनुसार बॉडी एलिमेंट में क्लास जोड़ता है जिसे बाद में लिपि के लिए इस्तेमाल किया जा सकता है।

-अब लोड और अभिविन्यास परिवर्तन पर डिवाइस की ऊंचाई सेट करने के लिए इस कोड का उपयोग करें:

if (jQuery('body').hasClass("touch-device")) {
//Loading height on touch-device
    function calcFullHeight() {
        jQuery('.hero-section').css("height", $(window).height());
    }

    (function($) {
        calcFullHeight();

        jQuery(window).on('orientationchange', function() {
            // 500ms timeout for getting the correct height after orientation change
            setTimeout(function() {
                calcFullHeight();
            }, 500);

        });
    })(jQuery);

} else {
    jQuery('.hero-section').css("height", "100vh");


}

-टाइमआउट सेट किया गया है ताकि डिवाइस अभिविन्यास परिवर्तन पर सही ढंग से नई ऊंचाई की गणना करेगा। यदि कोई टाइमआउट नहीं है, तो मेरे अनुभव में ऊंचाई सही नहीं होगी। 500 मी अधिक मात्रा में हो सकते हैं लेकिन मेरे लिए काम किया है।

यदि ब्राउजर CSS 100vh को ओवरराइड करता है, तो होवर-डिवाइसेज़ पर 100vh एक कमबैक है।

Comments

सभी ब्राउज़र पर टचस्टार्ट समर्थित नहीं है, और कुछ गैर-मोबाइल उपकरणों के पास डेवलपर.

— mozilla.org/en-US/docs/Web/Events/touchstart

@ ड्रेनई टचस्टार्ट अधिकांश मोबाइल ब्राउज़रों पर समर्थित है। डेस्कटॉप पर समर्थन थोड़ा कम है, IE, ओपेरा और सफारी इसका समर्थन नहीं कर रहे हैं। हालाँकि मूल प्रश्न मोबाइल पर है न कि डेस्कटॉप पर। जो इसे एक वैध उत्तर बनाता है।

— पॉल

टिप्पणियों के लिए धन्यवाद! मैंने मुख्य रूप से इस रणनीति का उपयोग कुछ मोबाइल ब्राउज़रों पर स्क्रीन की पुनरावृत्ति और उछाल को दूर करने के लिए किया है। यदि ब्राउज़र टचस्टार्ट का समर्थन नहीं करता है तो फॉलबैक css 100vh होगा - यदि 100vh समर्थित नहीं है तो यह एक अलग विषय है। यदि डेस्कटॉप डिवाइस में टच सपोर्ट होता है, तो ऊंचाई की गणना जावास्क्रिप्ट के साथ की जाएगी। फिर हम 100vh प्रदान करने वाले आकार पर फिर से गणना खो देते हैं, लेकिन यह सामान्य रूप से एक घातक मुद्दा नहीं है क्योंकि डेस्कटॉप पर ओरिएंटेशन परिवर्तन नहीं हैं।

— tjgoodman

साथ ही, ऊँचाई गणना को घटना के आकार से भी जोड़ा जा सकता है, लेकिन फिर हम मोबाइल उपकरणों पर पुनरावृत्ति और छलांग की समान समस्या में भाग सकते हैं। इसलिए, मैंने इस रणनीति को व्यावहारिक पाया है।

— tjgoodman

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

— Drenai

Answer 12

निम्नलिखित कोड ने समस्या को हल किया (jQuery के साथ)।

var vhHeight = $("body").height();
var chromeNavbarHeight = vhHeight - window.innerHeight;
$('body').css({ height: window.innerHeight, marginTop: chromeNavbarHeight });

और अन्य तत्व %प्रतिस्थापित करने के लिए एक इकाई के रूप में उपयोग करते हैं vh।

Answer 13

यहाँ मैं अपने रिएक्ट ऐप के लिए इस्तेमाल किया गया एक काम है।

iPhone 11 प्रो और iPhone प्रो मैक्स - 120 पीएक्स

iPhone 8 - 80 पीएक्स

max-height: calc(100vh - 120px);

यह एक समझौता है लेकिन अपेक्षाकृत सरल है

Answer 14

निम्नलिखित ने मेरे लिए काम किया:

html { height: 100vh; }

body {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
}

/* this is the container you want to take the visible viewport  */
/* make sure this is top-level in body */
#your-app-container {
  height: 100%;
}

bodyदिखाई व्यूपोर्ट ऊंचाई पर ले जाएगा और #your-app-containerसाथ height: 100%कि कंटेनर दिखाई व्यूपोर्ट ऊंचाई ले कर देगा।

Answer 15

उम्मीद है, यह एक यूए-परिभाषित सीएसएस पर्यावरण चर होगा जैसा कि यहां सुझाया गया है: https://github.com/w3c/csswg-drafts/issues/2630#issuecomment-397536046

Answer 16

क्योंकि यह तय नहीं किया जाएगा, आप कुछ ऐसा कर सकते हैं:

# html
<body>
  <div class="content">
    <!-- Your stuff here -->
  </div>
</body>

# css
.content {
  height: 80vh;
}

मेरे लिए यह जावास्क्रिप्ट के साथ खेलने की तुलना में सबसे तेज और अधिक शुद्ध समाधान था जो कई उपकरणों और ब्राउज़रों पर काम नहीं कर सकता था।

बस उचित मूल्य का उपयोग करें vhजो आपकी आवश्यकताओं के अनुरूप हो।

Answer 17

मोबाइल उपकरणों पर vh का उपयोग 100vh के साथ काम नहीं करने जा रहा है, उनके डिजाइन विकल्पों के कारण डिवाइस की पूरी ऊंचाई का उपयोग करते हुए जिसमें कोई पता बार शामिल नहीं है आदि।

यदि आप डिव हाइट्स सहित एक लेआउट की तलाश कर रहे हैं जो कि सही दृश्य ऊंचाई के अनुपात मैं निम्नलिखित शुद्ध सीएसएस समाधान का उपयोग करता है:

:root {
  --devHeight: 86vh; //*This value changes
}

.div{
    height: calc(var(--devHeight)*0.10); //change multiplier to suit required height
}

आपके पास व्यूपोर्ट ऊँचाई सेट करने के लिए दो विकल्प हैं, मैन्युअल रूप से - हाईहाईट को एक ऊँचाई पर सेट करें जो काम करता है (लेकिन आपको प्रत्येक प्रकार के डिवाइस के लिए यह मान दर्ज करना होगा जो आप के लिए कोडिंग कर रहे हैं)

या

खिड़की की ऊंचाई प्राप्त करने के लिए जावास्क्रिप्ट का उपयोग करें और फिर अपडेट करें - व्यूपोर्ट को लोड करने और ताज़ा करने पर एक बार (हालांकि यह जावास्क्रिप्ट का उपयोग करने की आवश्यकता है और शुद्ध सीएसएस समाधान नहीं है)

एक बार जब आप अपनी सही दृश्य ऊँचाई प्राप्त कर लेते हैं, तो आप कुल व्यूपोर्ट ऊँचाई के सटीक प्रतिशत पर एक से अधिक विभाजनों का निर्माण कर सकते हैं, बस जिस ऊँचाई को आप असाइन करते हैं उसमें गुणक को बदलकर।

0.10 = 10% दृश्य ऊंचाई 0.57 = 57% दृश्य ऊंचाई

आशा है कि यह किसी की मदद कर सकता है;)

Comments

यह एक अच्छा उपाय है। आप इस लेख के बारे में Css-tricks पर अधिक पढ़ सकते हैं ।

— Amaury Hanser

Answer 18

आप निम्नलिखित स्क्रिप्ट और शैली को जोड़कर ऐसा कर सकते हैं

  function appHeight() {
    const doc = document.documentElement
    doc.style.setProperty('--vh', (window.innerHeight*.01) + 'px');
  }
  window.addEventListener('resize', appHeight);
  appHeight();

अंदाज

.module {
 height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

Answer 19

html, body { height: 100% }मोबाइल उपकरणों पर 100vh के प्रभाव के लिए कुछ करने की कोशिश करें ।

Answer 20

आप position: fixed; top: 0; bottom: 0;अपने कंटेनर में गुण देने का प्रयास कर सकते हैं ।

Comments

इस बारे में अधिक जानकारी जोड़ें कि यह प्रश्न का उत्तर क्यों है।

— संक्रमित ड्रेक