ज़ूम मोबाइल सफारी

Question

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

उदाहरण के लिए यदि वर्तमान में div का शीर्ष ज़ूम स्तर 1 पर स्क्रीन के केंद्र में है, (1.00 का स्केल कहें), जब उपयोगकर्ता ज़ूम स्तर 2 पर जाता है, (एक चुटकी ज़ूम इशारा के माध्यम से, स्केल कहें 1.235 का), मैं स्क्रीन के केंद्र में div के शीर्ष को फिर से स्थानांतरित करना चाहता हूं।

वर्तमान में, मैं div के मूल कंटेनर को एक फ़ंक्शन में बाध्य कर रहा हूं जो इशारा घटनाओं को पकड़ता है।

स्रोत के लिए लिंक देखें।

इस मामले पर कोई मार्गदर्शन की सराहना की जाएगी। धन्यवाद।

अद्यतन: यहां नमूना आवेदन का एक लिंक है। आप मेरे सभी मौजूदा हैंडलर और कार्यक्षमता पा सकते हैं। मेरी मुख्य चिंता ज़ूम के बाद स्क्रीन के सापेक्ष उसी स्थान पर तत्व 'पामगार्ड' का रीसेट है। अगर आपका कोई प्रश्न हैं, तो मुझे से पूछें।

लिंक: http://restingrobot.com/test/testScale.html

यह उदाहरण केवल मोबाइल सफारी पर काम करता है

Answer 1

ठीक है मेरा मानना ​​है कि यह तुम क्या चाहते है।

ज़ूम कारक का उपयोग करने के बजाय आपको आईओएस स्क्रीन के लिए आनुपातिक रूप से div की स्थिति की गणना करने की आवश्यकता है। आपको इसे पूरे ट्रैक रखने की आवश्यकता होगी। जब भी div ले जाया जाता है (नहीं ज़ूम इन) और शुरू में आप यह मान प्राप्त करने की आवश्यकता:

//When div moved and start 
var height = window.innerHeight; //Adjust if needed 
screenPos = (currentDivTop - window.pageYOffset)/height; 

फिर

जब ज़ूमिंग होता है आप पृष्ठ के शीर्ष बात करने के लिए gestureEnd पर div के शीर्ष निर्धारित करने की आवश्यकता स्क्रीन (यानी window.pageYOffset) प्लस स्क्रीन पर वर्तमान संख्या पिक्सल (window.innerHeight) आईओएस स्क्रीन पर रिश्तेदार स्थिति से बार हमने पहले (स्क्रीनपोज़) की गणना की थी। यह आपको आवश्यक स्क्रीन पर नई स्थिति देता है (पिछली बार से अंतर नहीं)।

//GestureEnd of zoom 
var height = window.innerHeight; //Adjust if needed 
var newDivTop = window.pageYOffset + (screenPos*height); 

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

मुझे लगता है कि ज़ूम "बैंडिंग" के लिए आपका तर्क अत्यधिक सरल है, यानी अगर यह ज़ूम करने के लिए है तो ज़ूमिंग की सीमा के भीतर वापस उछालती है? मुझे नहीं लगता कि यह अलग-अलग आईओएस स्क्रीन आकारों को ध्यान में रखता है।

साथ ही साथ "हेडिंग" को प्रभावित करने वाली "बैंडिंग" यह posYOffset के मान को भी प्रभावित करती है, जो वास्तव में समझ में आता है। इससे div को पृष्ठ के नीचे रखा जाएगा। इसके आस-पास एक संभावित तरीका यह पता लगाने के लिए होगा कि ज़ूमिंग बहुत दूर हो गई है (बैंडिंग जैसा कि आप इसे संदर्भित करते हैं) और एक मतदान कार्य का उपयोग करके पता लगाया जाता है कि आंतरिक हाइट अपने न्यूनतम पर वापस आ गया है, फिर posYOffset प्राप्त करें। अगर मतदान के बाद एक घटना मौजूद है तो मतदान की आवश्यकता नहीं होगी।

आप innerHeight मूल्य बैंडिंग से स्क्रीन (posYOffset) की सही शीर्ष गणना करने में सक्षम हो सकता है, लेकिन मैं इसे जब जूमिंग जहां ज़ूम पर उंगलियों जगह हैं पर निर्भर हो सकता है लगता है।

इसी posYOffset और innerHeight का मूल्य तो भी होने वाली आप कुछ तंत्र की आवश्यकता होगी pageYOffset और innerHeight की तय मान प्राप्त करने के बैंडिंग बिना gestureEnd घटना के बाद बदलने के लिए, प्रतीत होता है। आप gestureEnd के लिए निम्न जोड़कर इस प्रभाव का परीक्षण कर सकते हैं:

//In gestureEnd 
alert ('gestureEnd pageY:'+window.pageYOffset+' height:'+height); 
setTimeout(function() { 
       alert ('later pageY:'+window.pageYOffset+' height:'+window.innerHeight); 
         }, 
      2000); 

Answer 2

खैर मैं ईमानदार हो सकता है और आपको बता दूँ कि मैं अभी तक मोबाइल एप्लिकेशन/webstes पर काम नहीं किया जाएगा। इसलिए यदि वे वेबसाइटों के लिए उपयोग की जाने वाली पारंपरिक jquery से अलग हैं तो मैं सभी वाक्यविन्यास पर सही नहीं हो सकता। लेकिन आप नीचे एल्गोरिदम का प्रयास कर सकते हैं (जो मूल रूप से ऊपर से पृष्ठ के केंद्र में div को स्थान देता है)। मैंने पारंपरिक jquery का उपयोग किया है क्योंकि मैं इससे परिचित हूं।

/* ---- Excute the below lines on $(window).resize(function(){}); or a function that is triggered on zoom [which ever is correct] ---- */ 

var modalH = parseInt($('[THE DIV/ELEMENT THAT YOU WANT TO CENTER]').css('height')); 
var windowH = $(window).height(); 
var modalPosY = (windowH - modalH)/2; 
$('[THE DIV/ELEMENT THAT YOU WANT TO CENTER]').css('Top', modalPosY); 

और div/element की सीएसएस संपत्ति का पूरा होना पूर्ण [अगर यह पहले से सेट नहीं है] होना चाहिए। और एक ही (चौड़ाई के साथ ऊंचाई की जगह) x- अक्ष केंद्र के लिए किया जा सकता है

या

आप div/तत्व की स्थिति को (जो मैं काम करता है बेहतर अनुमान) के लिए प्रतिशत मान इस्तेमाल कर सकते हैं । निम्नलिखित लेख आपको उस पर मदद करेगा - http://novemberborn.net/2007/12/javascriptpage-zoom-ff3-128। (परीक्षण केस देखें)