मोबाइल क्रोम आग स्क्रॉल पर घटना का आकार परिवर्तन करते हैं

Question

मैं गैलेक्सी s4, एंड्रॉइड 4.2.2 पर क्रोम मोबाइल ब्राउज़र का उपयोग कर रहा हूं और किसी कारण से हर बार जब मैं पृष्ठ को नीचे स्क्रॉल करता हूं, तो यह jquery.cycle2 स्लाइड शो से छवियों के स्केलिंग द्वारा सत्यापित एक आकार बदलने वाली घटना को फायर करता है।

किसी भी विचार क्यों यह हो रहा हो सकता है?

Comments

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

— कोबी ब्रायंट

Answer 1

बस जिज्ञासा के लिए, मैं इसे पुन: पेश करने की कोशिश कर रहा था और अगर मैं सही हूं तो यह नेविगेशन क्रोम बार के कारण होता है।

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

संबंधित लेख: https://developers.google.com/web/updates/2016/12/url-bar-resizing

Comments

यह एक इच्छित व्यवहार है या नहीं, हम यह नहीं चाहते हैं कि यह आकार परिवर्तन समारोह को आग लगा दे। तो यहाँ क्या समाधान है, एक लंबे घुमावदार कोड के मार्ग के बिना जो अन्य उत्तर सुझाए हैं?

— स्टडोकवहो

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

— अल्बर्टोफैडज़्म

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

— मार्संडबैक

Answer 2

यह अजीब लगता है, लेकिन मैंने इसे अन्य ब्राउज़रों में देखा है। आप इस तरह के आसपास काम कर सकते हैं।

var width = $(window).width(), height = $(window).height();

तो अपने आकार घटना हैंडलर में आप कर सकते हैं।

if($(window).width() != width || $(window).height() != height){
  //Do something
}

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

Comments

मेरा दिन बचाया! मुझे केवल चौड़ाई की जांच करने की आवश्यकता है

— यूरी क्वर्त्सय्यानी

स्क्रोलबार छिपने या दिखाने के कारण समस्या होती है, जिससे स्क्रीन की ऊंचाई बदल जाती है, इसलिए ट्रिगरिंग होती है $(window).resize()। मैंने एक संपादन का सुझाव दिया है।

— Sander Koedood

बस यह जोड़ना चाहता था कि हमने iOS सफारी के साथ भी ऐसा ही व्यवहार किया है।

— क्रिश क्रूस

चूँकि यह वह ऊँचाई है जो यदि स्थिति बदल रही है तो केवल चौड़ाई में परिवर्तन के लिए जाँच करनी चाहिए। साथ ही स्थिति तब तक ट्रिगर नहीं होती है जब तक कि चौड़ाई और ऊंचाई दोनों बदल नहीं जाती। जो हमेशा मामला नहीं होता है, लेकिन लगभग सभी स्क्रीन री-साइज में चौड़ाई में परिवर्तन शामिल होता है, इसलिए मेरा सुझाव है कि ऊंचाई वाले हिस्से का उपयोग न करें। if($(window).width() != width){ }

— इमरान बुगियो

यह होना चाहिए || के बजाय &&

— मायसम तोराबि

Answer 3

मुझे नहीं पता कि यह अभी भी दिलचस्प है, लेकिन मेरा समाधान है:)

var document_width, document_height;

$(document).ready(function()
{
	document_width=$(document).width(); document_height=$(document).height();
    // Do something
}

$(window).resize(function()
{
    if(document_width!=$(document).width() || document_height!=$(document).height()) 
    {
        document_width=$(document).width(); document_height=$(document).height();
        // Do something
    }
}	

Comments

मुझे लगता है कि आपको $ (विंडो) .height () नहीं $ (डॉक्यूमेंट) .height (), और चौड़ाई का उपयोग करना चाहिए।

— तारेक एल-मल्लाह

Answer 4

इस प्रश्न का उत्तर पहले ही दिया जा चुका है, लेकिन चूंकि यह प्रश्न उत्तरदायी साइटों के प्रश्न को नहीं लाता है, इसलिए मैं उस पर कुछ जानकारी जोड़ना चाहूंगा।

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

OnOrientationChange का उपयोग शुरू करने के लिए स्विच करना एक विकल्प नहीं था क्योंकि यह एक उत्तरदायी साइट है, डेस्कटॉप पीसी पर कोई अभिविन्यास परिवर्तन नहीं है, लेकिन मुझे अभी भी नियमित पीसी: एस, टैबलेट और स्मार्टफोन दोनों पर काम करने के लिए कोड की आवश्यकता है।

मैं ब्राउज़र को सूँघने और ऐसा करने के लिए शुरू कर सकता था लेकिन मैं अब तक इससे बचने में सक्षम रहा हूँ।

मैंने सीडब्ल्यूआईटी द्वारा सुझाए गए समाधान को लागू करने की कोशिश की, लेकिन चूंकि ऊपर या नीचे स्क्रॉल करने से वास्तव में ऊंचाई-परिवर्तन होता है जो या तो काम नहीं करता था।

मैंने एक शर्त जोड़ते हुए कहा कि केवल मेनू को छुपाता है जब चौड़ाई बदल जाती है, न कि जब ऊंचाई बदल गई है। यह मेरे मामले में काम करता है क्योंकि मुझे केवल मेनू को फिर से लिखना होगा जब चौड़ाई बदल जाएगी।

Comments

मेरा सुझाव ऊंचाई की जाँच करना और केवल चौड़ाई की जाँच करना होगा।

— बर्टनी

स्वीकृत उत्तर अभी भी लागू होता है; अपनी आवश्यकताओं के अनुसार तर्क जारी रखना आपके ऊपर है। अंतत: आपने इसे स्वयं खोज लिया और यह केवल स्वीकृत उत्तर के तहत एक टिप्पणी होनी चाहिए।

— मार्संडबैक

Answer 5

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

Answer 6

यह स्क्रॉल मोबाइल पर जावास्क्रिप्ट आकार बदलने की घटना का एक डुप्लिकेट है

इसे ठीक करने के लिए, onOrientationChange और window.orientation property का उपयोग करें। संबंधित जवाब देखें: यहां

Comments

गलत है। यह प्रश्न मोबाइल ब्राउज़र में अप्रत्याशित रूप से गोलीबारी की घटना के बारे में है।

— user2867288

वास्तव में, यह जरूरी गलत नहीं है। onOrientationChange का उपयोग करना एक मोबाइल डिवाइस पर एक वैध बदलाव है, जब आप एक स्क्रीन के आकार की घटना आग देखने की सबसे अधिक संभावना रखते हैं। यह उत्तर ठीक है। मैं इसे सिर्फ इसलिए नहीं बढ़ा रहा हूं क्योंकि एक और मामला है कि यह पकड़ में नहीं आएगा - और यह कि जब ब्राउज़र क्रोम दिखाई देते हैं / गायब हो जाते हैं, तो यह आकार बदलने वाली घटनाओं का कारण बनता है (जो कि मेरी समस्या है एटीएम)। अन्यथा यह एक अच्छा समाधान होगा।

— दुबेवाद

मान लीजिए कि आपको स्क्रीन पर तत्वों को समायोजित करने के लिए आकार बदलने वाली घटनाओं को पकड़ना चाहिए; आप अपने डेवलपर टूल को खोलते हैं और सब कुछ विंडो के आकार के साथ ठीक काम करता है, आप ऊपर-नीचे स्क्रॉल भी कर सकते हैं! अब, आप टेबलेट पर पृष्ठ खोलने का निर्णय लेते हैं, आप ऊपर-नीचे स्क्रॉल करते हैं और सब कुछ आपकी स्क्रीन पर भूकंपों को फिर से समायोजित कर रहा है! आपको अभी भी अपने पीसी पर विंडो आकार बदलने की घटनाओं को संभालने की आवश्यकता है! तो, यह एक सही जवाब नहीं है!

— सेंटुरियन

मैं अभिविन्यास परिवर्तन को ट्रैक करने के लिए window.resize का उपयोग कर रहा था। इस प्रकार इस मुद्दे का सामना करना पड़ रहा है। यह एक महान विचार है।

— AMNBandara

उत्तर में या लिंक किए गए उत्तर में भी कोई उचित नमूना कोड नहीं है, और बाहरी लिंक मृत हैं। किसी भी मामले में, ओपी प्रश्न बुनियादी स्क्रॉलिंग से संबंधित है, जिसमें कोई अभिविन्यास परिवर्तन नहीं है, जहां उन्मुखीकरण की परवाह किए बिना एक पुनरीक्षण घटना शुरू हो रही है। बस ऊंचाई में परिवर्तन के लिए जाँच करना सबसे कुशल सार्वभौमिक चीज़ है। onOrientationChangeअन्यत्र उपयोगी है ..

— MarsAndBack 17

Answer 7

कई resizeमोबाइल ब्राउज़र में आग लग सकती है।

मुझे पता है कि बाहरी संसाधन से लिंक करना आदर्श नहीं है, लेकिन QuirksMode में एक पठनीय तालिका है, जिसे मैं यहाँ डुप्लिकेट (या बनाए रखना) नहीं चाहता: http://www.quirksmode.org/dom/events/resize_mobile.html

बस एक उदाहरण देने के लिए, जो हमें मिल रहा था: जाहिरा तौर पर कई ब्राउज़रों में, नरम कीबोर्ड को खोलने से घटना होती है।