दिलचस्प पोस्ट
जब स्क्रॉल स्थिति शीर्ष पर है, तब स्वाइपफिरफ्रेश लेआउट + वेबदृश्य दो कॉलमों के आधार पर पंक्तियों को गतिशील रूप से कनवर्ट करने के लिए MySQL क्वेरी JTable के पहले और बाद में मुद्रण के लिए पाठ जोड़ें मैं सी # में यादृच्छिक अक्षरांकीय स्ट्रिंग कैसे उत्पन्न करूं? मोबाइल ब्राउज़र में स्क्रॉलबार दृश्यमान बनाएं एंड्रॉइड: वॉली HTTP अनुरोध कस्टम शीर्षलेख जावास्क्रिप्ट में प्रारूप "YYYYmmdd" में दिनांक को कैसे पार्स करना है? फ़्लोटिंग पॉइंट वैल्यू की तुलना करना Django सीएसआरएफ फ्रेमवर्क अक्षम नहीं किया जा सकता है और मेरी साइट को तोड़ रहा है सभी दूरस्थ कनेक्शन की अनुमति दें, MySQL कैसे एक आईपी mySQL में स्टोर करने के लिए उद्देश्य-सी में पूर्ण मूल्य में परिवर्तित करें मैं गैर-एएससीआईआई वर्ण कैसे निकाल सकता हूं लेकिन पायथन का उपयोग करके समय और स्थान छोड़ सकता हूं? थ्रेड स्लीपिंग के मामले में मोबाइल डिवाइस वेब ब्राउज़र के लिए कोई मानक हैं? क्या ऐसा आरएसएस में "कोल्डड" है?

पृष्ठभूमि छवि आईओएस / एंड्रॉइड / मोबाइल क्रोम को छिपाते समय पता चलता है

मैं वर्तमान में ट्विटर बूटस्ट्रैप का उपयोग कर एक संवेदनशील साइट को विकसित कर रहा हूं।

साइट पर मोबाइल / टेबलेट / डेस्कटॉप पर एक पूर्ण स्क्रीन पृष्ठभूमि छवि है। ये छवियां प्रत्येक के बीच घूमती हैं और फीका होती हैं, दो divs का उपयोग कर।

यह लगभग सही है, एक मुद्दे को छोड़कर। एंड्रॉइड पर आईओएस सफारी, एंड्रॉइड ब्राउजर या क्रोम का इस्तेमाल करते हुए पृष्ठभूमि थोड़ा सा कूदता है जब एक उपयोगकर्ता पेज को नीचे स्क्रॉल करता है और एड्रेस बार को छिपाने के लिए कारण देता है

साइट यहाँ है: http://lt2.daveclarke.me/

इसे किसी मोबाइल डिवाइस पर जाएं और नीचे स्क्रॉल करें और आपको छवि का आकार बदलना / कदम देखना चाहिए

जो कोड मैं पृष्ठभूमि डीआईवी के लिए उपयोग कर रहा हूं वह इस प्रकार है:

#bg1 { background-color: #3d3d3f; background-repeat:no-repeat; background-attachment:fixed; background-position:center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position:fixed; width:100%; height:100%; left:0px; top:0px; z-index:-1; display:none; } 

सभी सुझावों का स्वागत है – यह कुछ समय के लिए मेरे सिर में कर रहा है !!

Solutions Collecting From Web of "पृष्ठभूमि छवि आईओएस / एंड्रॉइड / मोबाइल क्रोम को छिपाते समय पता चलता है"

यह मुद्दा यूआरएल बार के कारण सिकुड़ते / स्लाइडिंग और # बीजी 1 और # बीजी 2 डिवाओं के आकार को बदलने के कारण होता है क्योंकि वे 100% ऊँचाई और "फिक्स्ड" हैं। चूंकि पृष्ठभूमि छवि को "कवर" करने के लिए सेट किया गया है, इसलिए यह छवि आकार / स्थिति को समायोजित करेगा क्योंकि उस क्षेत्र को बड़ा है

साइट के उत्तरदायी प्रकृति के आधार पर, पृष्ठभूमि को स्केल करना चाहिए। मैं दो संभावित समाधानों का मनोरंजन करता हूं:

1) # बीजी 1, # बीजी 2 की ऊंचाई 100 वीएच तक सेट करें सिद्धांत रूप में, यह एक सुरुचिपूर्ण समाधान है हालांकि, आईओएस में एक वीएच बग ( http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/ ) है। मैंने इस मुद्दे को रोकने के लिए अधिकतम-ऊंचाई का उपयोग करने की कोशिश की, लेकिन यह बनी रही

2) व्यूपोर्ट आकार, जब जावास्क्रिप्ट द्वारा निर्धारित किया जाता है, यूआरएल बार से प्रभावित नहीं होता है इसलिए, व्यूपोर्ट आकार के आधार पर # बीजी 1 और # बीजी 2 पर एक स्थिर ऊंचाई सेट करने के लिए जावास्क्रिप्ट का उपयोग किया जा सकता है यह सबसे अच्छा समाधान नहीं है क्योंकि यह शुद्ध सीएसएस नहीं है और पेज लोड पर थोड़ी सी छवि छलांग है। हालांकि, यह एकमात्र व्यवहार्य समाधान है जिसे मैं आईओएस के "वीएच" बगों (जो आईओएस 7 में तय नहीं किया गया है) पर विचार कर रहा हूं।

 var bg = $("#bg1, #bg2"); function resizeBackground() { bg.height($(window).height()); } $(window).resize(resizeBackground); resizeBackground(); 

एक तरफ ध्यान में रखते हुए, मैंने आईओएस और एंड्रॉइड में इन साइजिंग यूआरएल बार में इतने सारे मुद्दे देखा है। मैं इस उद्देश्य को समझता हूं, लेकिन उन्हें अजीब कार्यक्षमता और कहर के बारे में सोचने की ज़रूरत है, जिससे वे वेबसाइटों पर लाए। नवीनतम बदलाव, क्या आप स्क्रॉल ट्रिक्स का उपयोग करके आईओएस या क्रोम पर पेज लोड पर यूआरएल बार को "छुपा" नहीं कर सकते हैं।

संपादित करें: उपर्युक्त स्क्रिप्ट पृष्ठभूमि को रीसाइज़िंग से पूरी तरह से बनाए रखने के लिए पूरी तरह से काम करता है, लेकिन जब उपयोगकर्ता स्क्रॉल करते हैं तो यह एक महत्वपूर्ण अंतर का कारण बनता है। ऐसा इसलिए है क्योंकि यह पृष्ठभूमि को स्क्रीन की ऊंचाई के 100% से घटाकर यूआरएल बार रखता है। यदि हम ऊंचाई पर 60px जोड़ते हैं, जैसा कि स्विस सुझाव देता है, यह समस्या दूर हो जाती है। इसका मतलब यह है कि जब यूआरएल बार मौजूद है, तो हम पृष्ठभूमि की निचली 60 पीएक्स को नहीं देख पाएंगे, लेकिन यह उपयोगकर्ताओं को कभी भी अंतराल देखने से रोकता है।

 function resizeBackground() { bg.height( $(window).height() + 60); } 

मैंने पाया कि जेसन का जवाब मेरे लिए काफी काम नहीं कर रहा था और मैं अभी भी कूद रहा था। जावास्क्रिप्ट ने सुनिश्चित किया कि पृष्ठ के शीर्ष पर कोई अंतर नहीं है लेकिन जब भी पता बार गायब हो गया / फिर से निकल गया तब भी पृष्ठभूमि अभी भी कूद रही थी। जावास्क्रिप्ट फिक्स के साथ ही, मैंने transition: height 999999s लागू किया transition: height 999999s तक transition: height 999999s करने के लिए। यह एक अवधि के साथ एक संक्रमण इतनी लंबी बनाता है कि यह तत्व को स्थिर करता है।

मुझे हमारी वेबसाइट के एक शीर्ष पर एक समान समस्या मिल गई है

 html, body { height:100%; } .header { height:100%; } 

यह एंड्रॉयड क्रोम पर एक उछल स्क्रॉलिंग अनुभव में समाप्त हो जाएगा, क्योंकि यूआरएल-बार छिपाए जाने के बाद एंड्रॉइड-कंटेनर को स्क्रीन से निकाल दिया जाएगा।

सीएसएस-समाधान:

निम्नलिखित दो पंक्तियां जोड़ना, यह रोका जा सकता है कि यूआरएल बार छुपाता है और ऊर्ध्वाधर स्क्रॉल अभी भी संभव है:

 html { overflow: hidden; } body { overflow-y: scroll; -webkit-overflow-scrolling:touch; } 

समस्या को एक मीडिया क्वेरी और कुछ गणित के साथ हल किया जा सकता है। यहां पोर्टेट अभिविन्यास के लिए एक समाधान है:

 @media (max-device-aspect-ratio: 3/4) { height: calc(100vw * 1.333 - 9%); } @media (max-device-aspect-ratio: 2/3) { height: calc(100vw * 1.5 - 9%); } @media (max-device-aspect-ratio: 10/16) { height: calc(100vw * 1.6 - 9%); } @media (max-device-aspect-ratio: 9/16) { height: calc(100vw * 1.778 - 9%); } 

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

1) उस पहलू अनुपात के लिए मीडिया क्वेरी की एक श्रृंखला बनाएं, जिसे आप लक्षित करना चाहते हैं।

  • डिवाइस-पहलू-अनुपात का उपयोग पहलू अनुपात के बजाय क्योंकि उत्तरार्द्ध का आकार बदल जाएगा जब यूआरएल बार गायब हो जाएगा

  • मैंने सबसे अधिक लोकप्रिय के बीच में होने वाले किसी भी पहलू अनुपात को लक्षित करने के लिए डिवाइस-पहलू अनुपात के लिए 'अधिकतम' जोड़ा यह बिल्कुल सटीक नहीं होगा, लेकिन वे केवल अल्पसंख्यक उपयोगकर्ताओं के लिए होंगे और अभी भी उचित वीएच के करीब होंगे।

  • क्षैतिज / लंबवत का उपयोग करते हुए मीडिया क्वेरी को याद रखें, इसलिए पोर्टेट के लिए आपको नंबरों को फ़्लिप करने की आवश्यकता होगी

2) हर मीडिया क्वेरी के लिए ऊर्ध्वाधर ऊंचाई का जो भी प्रतिशत हो, आप पहलू अनुपात के पीछे से तत्व को वीडब्ल्यू में रखना चाहते हैं।

  • चूंकि आपको चौड़ाई और चौड़ाई से ऊँचाई का अनुपात पता है, इसलिए आप केवल% की ऊंचाई / चौड़ाई के अनुपात से% (आपके मामले में 100%) चाहते हैं।

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

यह एक बहुत ही खूबसूरत समाधान नहीं है, लेकिन अन्य विकल्प बहुत अच्छे नहीं हैं, वे यह मानते हैं कि:

  • अपनी वेबसाइट होने से उपयोगकर्ता को छोटी गाड़ी लगता है,

  • अनुचित तरीके से आकार वाले तत्व, या

  • कुछ बुनियादी स्टाइल के लिए जावास्क्रिप्ट का उपयोग करना,

यह दोष यह है कि कुछ डिवाइस में यूआरएल बार ऊंचाई या पहलू अनुपात भिन्न हो सकते हैं। हालांकि, इस पद्धति का उपयोग करते हुए, यदि कुछ ही डिवाइस में कुछ ही पिक्सल के अतिरिक्त / घटाए गए उपकरणों की थोड़ी सी संख्या का सामना करना पड़ता है, तो मेरे लिए सबसे बेहतर लगता है कि प्रत्येक व्यक्ति को स्वाइप करने पर वेबसाइट का आकार बदलता है।

इसे आसान बनाने के लिए, मैंने एक SASS मिश्रण भी बनाया है:

 @mixin vh-fix { @media (max-device-aspect-ratio: 3/4) { height: calc(100vw * 1.333 - 9%); } @media (max-device-aspect-ratio: 2/3) { height: calc(100vw * 1.5 - 9%); } @media (max-device-aspect-ratio: 10/16) { height: calc(100vw * 1.6 - 9%); } @media (max-device-aspect-ratio: 9/16) { height: calc(100vw * 1.778 - 9%); } } 

यहां सभी उत्तर window ऊँचाई का उपयोग कर रहे हैं, जो यूआरएल बार से प्रभावित होता है। क्या सभी screen ऊँचाई के बारे में भूल गए हैं?

यहां मेरा jQuery समाधान है:

 $(function(){ var $w = $(window), $background = $('#background'); // Fix background image jump on mobile if ((/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera)) { $background.css({'top': 'auto', 'bottom': 0}); $w.resize(sizeBackground); sizeBackground(); } function sizeBackground() { $background.height(screen.height); } }); 

.css() हिस्सा जोड़ना अनिवार्य रूप से शीर्ष-गठबंधन पूर्ण स्थिति वाला तत्व नीचे गठबंधन में बदल रहा है, इसलिए सभी पर कोई छलांग नहीं है। यद्यपि, मुझे लगता है कि बस सीएसएस को सीधे सीडी को जोड़ने के लिए कोई कारण नहीं है।

हमें उपयोगकर्ता एजेंट स्निफ़र की आवश्यकता है क्योंकि डेस्कटॉप पर स्क्रीन ऊंचाई सहायक नहीं होगी।

इसके अलावा, यह सभी मानते हैं कि #background एक निश्चित-स्थिति वाला तत्व है जो विंडो भरता है।

जावास्क्रिप्ट शुद्धता के लिए (चेतावनी – अनचेस्टर):

 var background = document.getElementById('background'); // Fix background image jump on mobile if ((/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera)) { background.style.top = 'auto'; background.style.bottom = 0; window.onresize = sizeBackground; sizeBackground(); } function sizeBackground() { background.style.height = screen.height; } 

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

मैं वर्तमान में जिस समाधान का उपयोग कर रहा हूं, वह userAgent ऑन $(document).ready को जांचना है। यह देखने के लिए कि क्या यह एक अपराधी ब्राउज़र है यदि ऐसा है, तो इन चरणों का पालन करें:

  1. प्रासंगिक ऊंचाई को वर्तमान व्यूपोर्ट ऊंचाई के बजाय '100%' सेट करें
  2. वर्तमान व्यूपोर्ट क्षैतिज मान को स्टोर करें
  3. फिर, $(window).resize , प्रासंगिक ऊँचाई मान अपडेट करें यदि नया क्षैतिज व्यूपोर्ट आयाम इसके प्रारंभिक मान से भिन्न होता है
  4. नई क्षैतिज और ऊर्ध्वाधर मानों को स्टोर करें

वैकल्पिक रूप से, आप अनुलंब आकार को केवल तब ही जांच सकते हैं जब वे पता पट्टी (ओं) की ऊंचाई से परे हों

ओह, और एड्रेस बार $(window).height को प्रभावित करता है। देखें: मोबाइल वेबकिट ब्राउज़र (क्रोम) पता बार $ (विंडो) बदलता है। हैइट (); पृष्ठभूमि का आकार बनाना: प्रत्येक बार "स्क्रीन" चौड़ाई-ऊँचाई बनाम जेएस "विंडो" चौड़ाई-ऊँचाई को कवर किया जाता है ?

मैं इस मुद्दे के साथ-साथ तब भी दौड़ा जब मैं एक प्रवेश स्क्रीन बनाने की कोशिश कर रहा था जो पूरे व्यूपोर्ट को कवर करेगा। दुर्भाग्य से, स्वीकृत जवाब अब काम नहीं करता है

1) प्रत्येक बार व्यूपोर्ट का आकार बदल जाता है, जब उस समय के कारण (डी) यूआरएल बार दिखाई दे रहा है, तो 100hv सेट की गई ऊंचाई के साथ तत्वों का आकार बदल जाता है।

2) $(window).height() यूआरएल बार के आकार से प्रभावित मूल्य भी रिटर्न करता है

एक समाधान transition: height 999999s का उपयोग करके "फ्रीज" तत्व है transition: height 999999s द्वारा दिए गए उत्तर में transition: height 999999s अनुसार । यह नुकसान यह है कि यह स्क्रीन को रोटेशन के कारण होने वाले व्यूपोर्ट आकार परिवर्तनों के अनुकूलन को प्रभावी ढंग से अक्षम करता है।

इसलिए मेरा समाधान व्यूपोर्ट परिवर्तनों को मैन्युअल रूप से जावास्क्रिप्ट का उपयोग करना है। इससे मुझे यूआरएल बार के कारण होने वाले छोटे बदलावों की अनदेखी करनी पड़ती है और केवल बड़े लोगों पर प्रतिक्रिया देती है।

 function greedyJumbotron() { var HEIGHT_CHANGE_TOLERANCE = 100; // Approximately URL bar height in Chrome on tablet var jumbotron = $(this); var viewportHeight = $(window).height(); $(window).resize(function () { if (Math.abs(viewportHeight - $(window).height()) > HEIGHT_CHANGE_TOLERANCE) { viewportHeight = $(window).height(); update(); } }); function update() { jumbotron.css('height', viewportHeight + 'px'); } update(); } $('.greedy-jumbotron').each(greedyJumbotron); 

संपादित करें: मैं वास्तव में height: 100hv साथ इस तकनीक का उपयोग करें height: 100hv । पृष्ठ बहुत शुरुआत से ठीक से गाया जाता है और फिर जावास्क्रिप्ट में किक और मैन्युअल रूप से ऊँचाई को प्रबंधित करना शुरू कर देता है। इस तरह से कोई भी झिलमिलाहट नहीं है, जबकि पृष्ठ लोड हो रहा है (या बाद में)।

जावास्क्रिप्ट के उपयोग के बिना मुझे एक बहुत आसान समाधान मिला:

 transition: height 1000000s ease; -webkit-transition: height 1000000s ease; -moz-transition: height 1000000s ease; -o-transition: height 1000000s ease; 

यह सब आंदोलन में देरी करता है ताकि यह अविश्वसनीय रूप से धीमा हो सके कि यह ध्यान देने योग्य नहीं है।

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

 var $hero = $('#hero-wrapper'), h = window.innerHeight; $hero.css('height', h); 

मैंने वीएच इकाइयों का उपयोग करने के लिए एक वेनिला जावास्क्रिप्ट समाधान बनाया है। वीएच का उपयोग कहीं अधिक कहीं भी पता सलाखों द्वारा स्क्रॉल पर कम से कम होता है। जंक को ठीक करने के लिए, जब पृष्ठ लाल हो जाता है, तो मुझे यह जेएस मिल गया है जो वीएच इकाइयों का इस्तेमाल करते हुए अपने सभी तत्वों को पकड़ लेगा (यदि आप उन्हें वर्ग .vh-fix दे), और उन्हें इनलाइन पिक्सेल ऊंचाई दें। अनिवार्य रूप से हम चाहते हैं ऊंचाई पर उन्हें ठंड। उत्तरदायी रहने के लिए आप रोटेशन पर या व्यूपोर्ट आकार परिवर्तन पर ऐसा कर सकते हैं।

 var els = document.querySelectorAll('.vh-fix') if (!els.length) return for (var i = 0; i < els.length; i++) { var el = els[i] if (el.nodeName === 'IMG') { el.onload = function() { this.style.height = this.clientHeight + 'px' } } else { el.style.height = el.clientHeight + 'px' } } 

इसने मेरे सभी उपयोग के मामलों को हल कर लिया है, आशा है कि यह मदद करता है।

यह इस मुद्दे को हल करने का मेरा समाधान है, मैंने सीधे कोड पर टिप्पणियां जोड़ दी हैं I मैंने इस समाधान का परीक्षण किया है और ठीक काम करता है आशा है कि हम सभी के लिए उपयोगी होंगे, एक ही समस्या है।

 //remove height property from file css because we will set it to first run of page //insert this snippet in a script after declarations of your scripts in your index var setHeight = function() { var h = $(window).height(); $('#bg1, #bg2').css('height', h); }; setHeight(); // at first run of webpage we set css height with a fixed value if(typeof window.orientation !== 'undefined') { // this is more smart to detect mobile devices because desktop doesn't support this property var query = window.matchMedia("(orientation:landscape)"); //this is is important to verify if we put var changeHeight = function(query) { //mobile device in landscape mode if (query.matches) { // if yes we set again height to occupy 100% setHeight(); // landscape mode } else { //if we go back to portrait we set again setHeight(); // portrait mode } } query.addListener(changeHeight); //add a listner too this event } else { //desktop mode //this last part is only for non mobile $( window ).resize(function() { // so in this case we use resize to have setHeight(); // responsivity resisizing browser window }); }; 

यह मैंने कोशिश की है सब कुछ ऊपर सबसे अच्छा समाधान (सरल) है

… और यह पता बार के मूल अनुभव को नहीं रखता है !

उदाहरण के लिए आप सीएसएस के साथ ऊँचाई 100% तक सेट कर सकते हैं, और फिर ज़ूम के साथ विंडो की ऊँचाई के 0.9% * ऊंचाई पर सेट कर सकते हैं, जब दस्तावेज लोड होता है।

उदाहरण के लिए jQuery के साथ:

$("#element").css("height", 0.9*$(window).height());

)

दुर्भाग्य से वहाँ कुछ भी नहीं है जो शुद्ध सीएसएस के साथ काम करता है: पी, लेकिन यह भी कम है कि वीएच और वीवी आईफ़ोन पर बैगी हैं – प्रतिशत का उपयोग करें।

मैं जावास्क्रिप्ट के साथ मेरी चौड़ाई तत्व सेट करता हूं। मैं डी वीएच सेट करने के बाद

एचटीएमएल

 <div id="gifimage"><img src="back_phone_back.png" style="width: 100%"></div> 

सीएसएस

 #gifimage { position: absolute; height: 70vh; } 

जावास्क्रिप्ट

 imageHeight = document.getElementById('gifimage').clientHeight; // if (isMobile) document.getElementById('gifimage').setAttribute("style","height:" + imageHeight + "px"); 

यह मेरे लिए काम करता है मैं jquery ect का उपयोग नहीं करते क्योंकि मैं इसे जितनी जल्दी स्थिति में लोड करना चाहता हूं।

इस समस्या के सभी विवरणों को समझने और सर्वोत्तम कार्यान्वयन को समझने में कुछ घंटे लग गए। यह अप्रैल 2016 तक केवल आईओएस क्रोम को यह समस्या है। मैंने एंड्रॉइड क्रोम और आईओएस सफारी पर कोशिश की – दोनों इस फिक्स के बिना ठीक थे इसलिए आईओएस क्रोम का उपयोग कर रहा हूँ I

 $(document).ready(function() { var screenHeight = $(window).height(); $('div-with-background-image').css('height', screenHeight + 'px'); }); 

मैं इस समाधान का उपयोग कर रहा हूं: पेज लोड पर बीजी 1 की ऊंचाई तय करें:

 var BG = document.getElementById('bg1'); BG.style.height = BG.parentElement.clientHeight; 

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

 window.addEventListener("resize", onResize, false); var BG = document.getElementById('bg1'); BG.style.height = BG.parentElement.clientHeight; var oldH = BG.parentElement.clientHeight; function onResize() { if(Math.abs(oldH - BG.parentElement.clientHeight) > 60){ BG.style.height = BG.parentElement.clientHeight + 'px'; oldH = BG.parentElement.clientHeight; } } 

पुनश्च: यह बग इतना परेशान है!

उन लोगों के लिए जो वास्तविक आंतरिक ऊंचाई और खिड़की की ऊर्ध्वाधर स्क्रॉल को सुनना पसंद करते हैं, जबकि क्रोम मोबाइल ब्राउज़र ट्रांज़िशन यूआरएल बार से छिपा हुआ है और इसके विपरीत दिखाई देता है, केवल एक समाधान जो मुझे मिला है एक अंतराल समारोह सेट करना है, और window.innerHeight के विसंगति को मापने के लिए। अपने पिछले मूल्य के साथ window.innerHeight

यह इस कोड को प्रस्तुत करता है:

 var innerHeight = window.innerHeight; window.setInterval(function () { var newInnerHeight = window.innerHeight; if (newInnerHeight !== innerHeight) { var newScrollY = window.scrollY + newInnerHeight - innerHeight; // ... do whatever you want with this new scrollY innerHeight = newInnerHeight; } }, 1000 / 60); 

जिस समस्या के साथ मैं आया था, उस समय की समस्या होने पर तत्व की ऊँचाई को window.innerHeight लिए सेट किया गया था। window.innerHeight हर बार window.innerHeight इवेंट को निकाल दिया गया था।

 var lastHeight = ''; $(window).on('resize', function () { // remove height when normal resize event is fired and content redrawn if (lastHeight) { $('#bg1').height(lastHeight = ''); } }).on('touchmove', function () { // when window height changes adjust height of the div if (lastHeight != window.innerHeight) { $('#bg1').height(lastHeight = window.innerHeight); } }); 

इससे तत्व समय-समय पर उपलब्ध स्क्रीन का 100% सटीक हो जाता है, अब और नहीं और कम नहीं। पता बार छुपा या प्रदर्शित होने के दौरान भी

फिर भी यह एक दया है कि हमें उस तरह के पैच के साथ आना होगा, जहां सरल position: fixed जाना चाहिए।

एलेक्सकेम्पटन के उत्तर के समान। (खेद टिप्पणी नहीं कर सका)

मैं तत्व रीसाइज़िंग को रोकने के लिए लंबे संक्रमण विलंब का उपयोग कर रहा हूं।

उदाहरण के लिए:

 transition: height 250ms 600s; /*10min delay*/ 

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