जब बैकग्राउंड iOS / Android / Mobile Chrome को छुपाता है तो बैकग्राउंड इमेज जंप करता है

Question

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

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

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

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

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

कोड मैं पृष्ठभूमि DIV के लिए उपयोग कर रहा हूँ निम्नानुसार है:

#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;
}

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

Comments

आपके लिंक के लिए ऑर्थॉरिटी चाहिए ... साथ ही, हमें कुछ कोड दिखाएं pls!

— शॉन टेलर

नए लिंक ने पृष्ठभूमि स्थिति आदि के लिए जोड़ा और दिखाया गया कोड

— डेव क्लार्क

यदि आप इस समस्या का सामना कर रहे हैं, तो आप डेवलपर्स की जाँच करना चाह सकते हैं । इस मुद्दे को अब (प्रकार) संबोधित किया गया है, लेकिन अभी भी उन तत्वों को प्रभावित करता है जिनके पास है position: fixed।

— एडम रीस

@ AdamReis अंत में! पोस्ट करने के लिए धन्यवाद

— डेव क्लार्क

Answer 1

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

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

1) सेट # bg1, # bg2 ऊंचाई 100vh करने के लिए। सिद्धांत रूप में, यह एक सुंदर समाधान है। हालाँकि, iOS में vh बग ( http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/ ) है। मैंने समस्या को रोकने के लिए अधिकतम ऊंचाई का उपयोग करने का प्रयास किया, लेकिन यह बना रहा।

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

var bg = $("#bg1, #bg2");

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

$(window).resize(resizeBackground);
resizeBackground();

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

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

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

Comments

इसके लिए धन्यवाद। मैं इसे कल दे दूंगा और आपको बता दूंगा कि मैं कैसे मिलता हूं :)

— डेव क्लार्क

यह अद्भुत है। मैंने आपका दूसरा समाधान लागू किया है, जो कि पाद और पृष्ठभूमि छवि के बीच केवल कुछ पिक्सेल अंतर के साथ लगभग पूरी तरह से काम करता है। मैंने आपकी 4 वीं पंक्ति को कोड में बदल दिया: bg.height(jQuery(window).height() + 60);जो मेरे सभी उपकरणों पर खूबसूरती से काम करता है! धन्यवाद :)

— डेव क्लार्क

iOS vh बग iOS8 में तय हो गया है लेकिन Android पर समस्या नहीं है। मैं vhइकाइयों का उपयोग कर रहा हूं और निश्चित रूप 100vhसे बड़ा है जब एड्रेस बार छिपा हुआ है। यह बेवकूफी है कि स्क्रॉलिंग रुकने के बाद यह कूद होता है। यह सिर्फ छोटी गाड़ी लगती है। मैंने इसे जानबूझकर प्रतीत करने के लिए ऊंचाई पर संक्रमण का उपयोग करके समाप्त कर दिया।

— ProblemsOfSumit

मैं पूरे पृष्ठ की सामग्री को लपेटते हुए bodyएक आवरण से पृष्ठभूमि को स्थानांतरित करके इस समस्या को हल करने में सक्षम था <div>। IOS या Android पर कोई जंपिंग बैकग्राउंड नहीं!

— मेरियस शुल्ज

जेएस समाधान मेरे (एंड्रॉइड) के लिए काम नहीं कर रहा है। पुष्टि की कि स्क्रिप्ट ऊंचाई निर्धारित कर रही है, लेकिन यह मुद्दा बरकरार है।

— jwinn

Answer 2

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

Comments

आप वास्तविक आउट-ऑफ-द-बॉक्स सोच के लिए +1 लायक हैं। दुर्भाग्य से यह किसी भी स्क्रीन आकार परिवर्तन के लिए div आकार को समायोजित करने से रोकता है, जिसमें स्क्रीन रोटेशन के कारण होने वाले उदाहरण भी शामिल हैं।

— 21

रचनात्मकता के लिए +1! यदि आप उपयोग करते हैं vwया vhउस मूल कंटेनर के अंदर फ़ॉन्ट का आकार निर्धारित करने के लिए इसे अभी के यौगिकों के रूप में उपयोग करना पड़ सकता है ।

— लूट

@tobik अभी भी 0.5 सेकंड या इतना संक्रमण सेट करके व्यूपोर्ट परिवर्तन के कारण कूद को कम करना संभव है

— बाइनरीफंट

अब फोन को घुमाने की कोशिश करें

— cuddlecheek

@tobik यह वास्तव में इसे बग की तुलना में अधिक फीचर बनाता है;) अच्छी सोच

— dimitrieh

Answer 3

मुझे हमारी वेबसाइट के हेडर पर एक समान समस्या मिली है।

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

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

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

निम्नलिखित दो पंक्तियों को जोड़ने से, यह रोकेगा कि url- बार छुपाता है और वर्टिकल स्क्रॉलिंग अभी भी संभव है:

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

Comments

हाँ, यह आपके कहे अनुसार इसे हल करता है, लेकिन यह बेकार है कि नौसेना बार हमेशा दिखा रहा है। कुछ फोन पर यह मूल्यवान स्क्रीन स्थान का एक हिस्सा ले सकता है!

— डेव क्लार्क

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

— चटाई

जब मैंने इस समाधान को आज़माया तो स्क्रॉल पूरी तरह से अक्षम है।

— निथिन बेबी

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

— गार्निशिंग

-उत्पत्ति-अतिप्रवाह-स्क्रॉलिंग का उपयोग उत्पादन साइटों पर नहीं किया जाना चाहिए। developer.mozilla.org/en-US/docs/Web/CSS/…

— फ्रेड्रिक वेस्टरलंड

Answer 4

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

@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%);
}

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

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

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

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

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

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

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

3) आपको url बार की ऊंचाई निर्धारित करनी होगी, और फिर ऊंचाई से घटाएं। मुझे सटीक माप नहीं मिला है, लेकिन मैं परिदृश्य में मोबाइल उपकरणों के लिए 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%);
  }
}

Comments

बहुत रचनात्मक! हालांकि 9% अनुमान का प्रशंसक नहीं है।

— w00t

बहुत ही सरल और स्मार्ट! आप मूल व्यवहार को अनुकरण करने के लिए @mixin vh-fix($vh: 100)height: calc(100vw * (1.333 * $vh / 100) - 9%)

— v-

उपरोक्त होना चाहिए:height: calc(100vw * (1.333 * #{$vh} / 100) - 9%)

— mjsarfatti

मेरे उपयोग के मामले के लिए, इसने वास्तव में अच्छी तरह से काम किया, और इससे भी बेहतर जब मैंने इसे हटा दिया -9%।

— बेन फ्लेमिंग

Answer 5

यहां सभी उत्तर windowऊंचाई का उपयोग कर रहे हैं , जो URL बार से प्रभावित है। क्या हर कोई 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;
}

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

Comments

मैंने इन उत्तरों में से एक लाख की कोशिश की और यह अब तक का सबसे अच्छा है। मैं मूल रूप से इसका उपयोग करने की कोशिश कर रहा था बस <शरीर> जैसा कि उसकी पृष्ठभूमि थी। पूरे पृष्ठ को लपेटने के लिए एक div का उपयोग करने से अन्य समस्याएँ पैदा हुईं। Z- इंडेक्स के साथ एक खाली डिव का उपयोग करना: -1 क्योंकि बैकग्राउंड उपरोक्त के साथ मिलकर सबसे अच्छा समाधान लगता है। मैंने मोबाइल का पता लगा लिया क्योंकि डेस्कटॉप पर ऐसा करने से मेरी साइट को कोई नुकसान नहीं होता है। कोई गणित (जो टैब के आकार का गलत अनुमान लगा सकता है), आकार बदलने के लिए किसी हैंडलर की जरूरत नहीं है। पृष्ठभूमि पूरी स्क्रीन है, नीचे तक लंगर डाले हुए है। किया हुआ। इसे प्यार करना!

— इवान लैंग्लिस

Answer 6

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

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

2) $(window).height()URL बार के आकार से प्रभावित रिटर्न मान भी।

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

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

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: 100vh। पृष्ठ को बहुत पहले से ठीक से प्रस्तुत किया गया है और फिर जावास्क्रिप्ट में किक करता है और मैन्युअल रूप से ऊंचाई का प्रबंधन शुरू करता है। इस तरह से पेज लोड होने पर (या बाद में भी) कोई भी टिमटिमाता नहीं है।

Comments

मैंने कुछ इसी तरह का उपयोग किया है, लेकिन height: 100vhशुरुआती सीएसएस में स्थापित करने के बजाय , मैंने सेट किया min-height:100vhऔर फिर खिड़की के आकार पर मैंने गणना की min-heightऔर इसे व्यू-पोर्ट ऊंचाई पर सेट किया। यह तब आसान होता है जब आपकी साइट को छोटे स्क्रीन पर देखा जाता है और व्यूपोर्ट पर फिट होने के लिए सामग्री बहुत बड़ी होती है। आकार बदलने की घटना पर एक बहस / गला घोंटना सेटटाउट कुछ ब्राउज़रों पर प्रदर्शन में सुधार करने में मदद करता है (आकार बहुत बार आग लग जाता है)

— ट्रॉय मोरहाउस

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

— तोबिक

आह, मैं भी यही समस्या थी, लेकिन यह करने के लिए jumbotron बदलकर display: tableऔर फिर आंतरिक कंटेनर के display: table-cellसाथ सेट करके इसे ठीक किया vertical-align: middle। एक जादू की तरह काम किया।

— ट्रॉय मोरहाउस

वास्तव में? क्योंकि मैंने उसी दृष्टिकोण की कोशिश की लेकिन मैं असफल रहा। मुझे वास्तव में याद नहीं है कि समस्या क्या थी लेकिन यह प्रासंगिक हो सकती है: stackoverflow.com/questions/7790222/…

— Tobik

बस सुनिश्चित करें कि आप प्रतिशत पैडिंग या मार्जिन से बचें। IE8 पर कुछ अजीब प्रतिपादन मुद्दों का कारण बनता है, हालांकि आधुनिक ब्राउज़र ठीक थे।

— ट्रॉय मोरहाउस

Answer 7

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

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

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

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

Comments

मैंने यह कोशिश नहीं की है, लेकिन क्या आपका पहला बिंदु iOS के लिए काम नहीं करेगा? ( thatemil.com/blog/2013/06/13/… )

— डेव क्लार्क

मैं पहले चरण में उसका मूल्य तय कर रहा था, लेकिन मुझे आश्चर्य है कि आपको समस्या को हल करने के लिए जेसन की प्रतिक्रिया मिली। जैसा कि मैंने पाया कि मैंने पहले वाले प्रश्न में अन्य उपयोगकर्ता के साथ पाया था, कि $ (विंडो) .height () विधि का मान तब बदल जाता है जब एंड्रॉइड पर क्रोम में पता बार दिखाई देता है या दिखाई नहीं देता है। मैंने एक साथ इस छोटी सी साइट को फेंक दिया है जो सिर्फ $ (विंडो) दिखाती है। इसका परिणाम () एक अलर्ट में है, और यह निश्चित रूप से क्रोम में मेरे नेक्सस 4 पर अलग-अलग मान प्रदान करता है जब एड्रेस बार होता है / दिखाई नहीं देता है: तूफानी-मैदानी-5908 .herokuapp.com

— mp

यह 100% मेरे एंड्रॉइड डिवाइस पर समस्या को ठीक करता है, हालांकि मैं अपने iPad पर एक समान मुद्दा देख रहा हूं जो कि यह ठीक करने के लिए प्रकट नहीं होता है जिसे मैं अभी भी देख रहा हूं।

— डेव क्लार्क

क्या आप अपने समाधान के लिए कुछ कोड प्रदान करने में सक्षम हैं और मैं इसे आज़माऊंगा?

— डेव क्लार्क

Answer 8

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

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

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

Comments

@ Tyguy7 यह ठीक है जब भी अपनी ऊंचाई एक निश्चित मूल्य, अर्थात् पर सेट नहीं है काम करता है 100%, 100vh। IE8 एकमात्र प्रमुख ब्राउज़र है जो संक्रमण का समर्थन नहीं करता है।

— पाव सिद्धू

बढ़िया और सरल उपाय!

— zdarsky.peter 20

यह बहुत अच्छा काम करता है जब तक कि आप एक ऐसे उपकरण पर न हों जहाँ आप चित्र से परिदृश्य में बदल सकते हैं। जब ऐसा होता है तो डिज़ाइन बर्बाद हो जाता है।

— नागी निक

@NagyNick मेरे लिए इतना बड़ा मुद्दा नहीं था। आप जावास्क्रिप्ट में अभिविन्यास परिवर्तन का पता लगा सकते हैं और पृष्ठभूमि छवि को समायोजित कर सकते हैं।

— पाव सिद्धू

Answer 9

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

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

$hero.css('height', h);

Answer 10

मैंने वीएच इकाइयों का उपयोग करने के लिए एक वेनिला जावास्क्रिप्ट समाधान बनाया। VH का उपयोग कहीं भी स्क्रॉल पर कम करने वाले एड्रेस बार से प्रभावित होता है। जब पृष्ठ फिर से दिखाई देता है, तो jank को ठीक करने के लिए, मुझे यह js यहाँ मिला है, जो आपके सभी तत्वों को VH इकाइयों (यदि आप उन्हें क्लास देते हैं .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'
  }
}

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

Answer 11

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

//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
  }); 
};

Comments

आप changeHeight के अंदर setHeight () कॉल कर रहे हैं यदि क्वेरी मेल खाती है और यह मेल नहीं खाता है तो भी। इसलिए अगर जरूरी नहीं है तो सिर्फ बयान निकालें।

— डेनिस मीस्नर

Answer 12

मेरे द्वारा की गई हर चीज के ऊपर यह सबसे अच्छा समाधान (सरलतम) है।

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

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

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

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

)

दुर्भाग्य से वहाँ कुछ भी नहीं है कि शुद्ध सीएसएस के साथ काम करता है: पी लेकिन यह भी minfull है vhऔर vwiPhones पर छोटी गाड़ी है - प्रतिशत का उपयोग करें।

Answer 13

मैंने अपना चौड़ाई तत्व, जावास्क्रिप्ट के साथ निर्धारित किया है। मैं डे vh सेट करने के बाद।

एचटीएमएल

<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 का उपयोग नहीं करता। क्योंकि मैं चाहता हूं कि यह जल्द से जल्द लोड हो।

Answer 14

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

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

Answer 15

यदि आपकी पृष्ठभूमि अनुमति देती है तो सरल उत्तर, पृष्ठभूमि-आकार क्यों सेट न करें: मीडिया प्रश्नों के साथ डिवाइस की चौड़ाई को कवर करने वाली किसी चीज़ के साथ: स्थिति के बाद: निश्चित; यहाँ हैक करें ।

IE: पृष्ठभूमि-आकार: 901px; किसी भी स्क्रीन के लिए <900px? पूर्ण या उत्तरदायी नहीं, लेकिन मोबाइल पर मेरे लिए एक आकर्षण काम किया <480px जैसा कि मैं एक सार बीजी का उपयोग कर रहा हूं।

Answer 16

मैं इस वर्कअराउंड का उपयोग कर रहा हूं: पृष्ठ लोड पर bg1 की ऊंचाई को ठीक करें:

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

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

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;
    }
}

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

Answer 17

@AlexKempton उत्तर के समान। (क्षमा नहीं कर सकते)

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

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

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

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

Answer 18

उन लोगों के लिए जो विंडो की वास्तविक आंतरिक ऊंचाई और ऊर्ध्वाधर स्क्रॉल को सुनना चाहते हैं, जबकि क्रोम मोबाइल ब्राउज़र URL बार को छिपे हुए और इसके विपरीत दिखाया जाता है, एकमात्र समाधान जो मैंने पाया है वह अंतराल फ़ंक्शन सेट करना है, और की विसंगति को मापें 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);

मुझे उम्मीद है कि यह आसान होगा। क्या कोई बेहतर उपाय जानता है?

Answer 19

जब मैं इसी तरह की समस्या का समाधान कर रहा था, तो window.innerHeightहर बार touchmoveहोने वाली घटना के लिए तत्व की ऊंचाई निर्धारित करना था।

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काम करना चाहिए।

Answer 20

आईओएस में सीएसएस कस्टम गुणों (चर) के समर्थन से, आप इन्हें जेएस के साथ सेट कर सकते हैं और केवल आईओएस पर उनका उपयोग कर सकते हैं।

const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (iOS) {
  document.body.classList.add('ios');
  const vh = window.innerHeight / 100;
  document.documentElement.style
    .setProperty('--ios-10-vh', `${10 * vh}px`);
  document.documentElement.style
    .setProperty('--ios-50-vh', `${50 * vh}px`);
  document.documentElement.style
    .setProperty('--ios-100-vh', `${100 * vh}px`);
}

body.ios {
    .side-nav {
        top: var(--ios-50-vh);
    }
    section {
        min-height: var(--ios-100-vh);
        .container {
            position: relative;
            padding-top: var(--ios-10-vh);
            padding-bottom: var(--ios-10-vh);
        }
    }
}

Answer 21

मेरा उत्तर उन सभी के लिए है जो यहां आते हैं (जैसे मैंने किया था) छुपाए गए पते नंगे / ब्राउज़र इंटरफ़ेस के कारण बग के लिए उत्तर खोजने के लिए।

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

// Keep track of window width
let myWindowWidth = window.innerWidth;

window.addEventListener( 'resize', function(event) {

    // If width is the same, assume hiding address bar
    if( myWindowWidth == window.innerWidth ) {
         return;
    }

    // Update the window width
    myWindowWidth = window.innerWidth;

    // Do your thing
    // ...
});