2016-03-26 4 views
8

मेरे पास एंड्रॉइड में एक दस्तावेज़ रीडर प्रोजेक्ट है। मुख्य गतिविधि में एक वेब व्यू शामिल है। ग्रंथ एचटीएमएल से पढ़ रहे हैं। शीर्ष विकल्प मेनू में टेक्स्ट आकार को गतिशील रूप से बढ़ाने के लिए एक बटन शामिल है (टेक्स्ट रैपिंग कर रहे हैं)। अब तक इतना स्पष्ट है कि जब बटन दबाया जाता है, तो पाठ का आकार कुछ बढ़ता है लेकिन सभी पाठ स्क्रीन में नीचे स्थानांतरित हो रहे हैं और बटन दबाकर दो बार, टेक्स्ट आकार बढ़ता है और सभी टेक्स्ट फिर से नीचे स्थानांतरित हो जाते हैं। यह स्थिति वास्तव में पाठकों के लिए निराशाजनक हो रही है। पाठक को बटन दबाए जाने के बाद इसे छोड़ दिया जाना चाहिए ताकि पाठक को पढ़ने का स्थान खोना न पड़े। इस समस्या को हल कैसे करें?एंड्रॉइड में वेबव्यू टेक्स्ट ज़ूम इश्यू

मुद्दा:

The Issue:

जब समस्या हल हो जाती:

When solved the issue:

एचटीएमएल ग मेरी WebView की ontent:

<!DOCTYPE html> 

    <head> 
     <style type="text/css"> 
      p{} p.x1{} p.x2{} p.x3{} p.x4{} 
      h2.x1{} h2.x2{} h2.x3{} h2.x4{} 
     </style> 
    </head> 

    <body> 

     //paragraph-1 
     <p class="x1">Title-1</p> 
     <p class="x2">Title-2</p> 
     <p class="x3">Title-3</p> 
     <p class="x4">Title-4</p> 
     <p>Text content.</p> 


     //paragraph-2 
     <h class="x1">Title-1</p> 
     <h class="x2">Title-2</p> 
     <p>Text content.</p> 


     //paragraph-3 
     <h class="x3">Title-1</p> 
     <h class="x4">Title-2</p> 
     <p class="x3">Title-3</p> 
     <p>Text content.</p> 


     //paragraph-4 
     <h class="x2">Title-1</p> 
     <p class="x3">Title-2</p> 
     <p>Text content.</p> 


     //... 

    </body> 

</html> 

उत्तर

-1

इस प्रयास करें:

settings.setDefaultFontSize(50); //Larger number == larger font size 
1

ऑन-स्क्रीन पाठ रखने का मेरा विचार "तत्व" जो कुछ भी करने के लिए एक संदर्भ के स्टोर करने के लिए है (पी, div, img, आदि) एक निश्चित x,y बिंदु पर स्क्रीन पर है, फ़ॉन्ट आकार बदल रहा है, फिर स्क्रॉलिंग उस तत्व को स्क्रीन पर वापस स्क्रॉल करें।

//Route your onclick handler to our new function 
function fontBtnClk() { 

    //Store whatever paragraph container is in the middle of the screen 
    var currentParagraph = document.elementFromPoint(window.innerWidth/3, window.innerHeight/3); 

    //If the above "paragraph selector" selected the whitespace in-between two paragraphs, and stored the parent element instead: 
    if(currentParagraph.tagName.toLowerCase()=="body") { 

    //Divide by a different number to select the winning paragraph 
    currentParagraph = document.elementFromPoint(window.innerWidth/3, window.innerHeight/2); 
    } 

    //Call your existing font size handler 
    increaseFontSize(); 

    //Move the previous paragraph back onto the screen: 
    currentParagraph.scrollIntoView(); 
} 

आशा इससे आपकी समस्या का हल:

मैं एक काम कोड उदाहरण है कि Android Webview में काम करता है बनाया!

+0

संपादित प्रश्न, आप अधिक जानकारी देख सकते हैं।मैं समझ नहीं पा रहा हूं "___ PARENT-ELEMENT-ID ___"? – ATES

+0

@ATES ठीक है, मैंने अपने एचटीएमएल के साथ सही निष्पादन के लिए अपना कोड tweaked! –

+0

आपकी स्क्रिप्ट कोई स्थिर नहीं है (http://jsbin.com/tuyaru/edit?output) – ATES

1

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

  1. फ़ॉन्ट आकार बदलने से पहले स्क्रॉल ऊंचाई और टेक्स्ट व्यू को स्क्रॉल करें। पुस्तक ऊंचाई के बीच अनुपात का निर्धारण और स्थिति
  2. नई पुस्तक ऊंचाई
  3. नई पुस्तक ऊंचाई बार वर्ष अनुपात के रूप में नई पुस्तक स्थिति सेट को मापने (0 और 1 के बीच) बदलें फ़ॉन्ट आकार
  4. के बाद प्रस्तुत करना, स्क्रॉल करें।

प्रासंगिक स्निपेट: https://jsfiddle.net/Ln43xxv5/

मैं मानता हूं कि मैं एंड्रॉयड में अभी परीक्षण नहीं कर सकते, लेकिन मैं कर मानना ​​है कि सामान्य दिशा:

function setSize() { 
    var heightBefore = textContainer.scrollHeight; 
    var scrollBefore = textContainer.scrollTop; 
    var percBefore = scrollBefore/heightBefore; 

    textContainer.style.fontSize = fontSize + "px"; 

    var heightAfter = textContainer.scrollHeight; 
    var scrollAfter = textContainer.scrollTop; 

    var correctedScrollAfter = Math.floor(heightAfter * percBefore); 
    textContainer.scrollTop = correctedScrollAfter; 
} 

आप यहाँ एक उदाहरण देख सकते हैं कार्य करना चाहिए।

+0

मैंने आपकी स्क्रिप्ट jsfiddle और एंड्रॉइड ऐप पर कोशिश की लेकिन कोई स्थिर नहीं। चूंकि अनुच्छेद शीर्ष पर नहीं रखा जाता है, यह फ़ॉन्ट बढ़ते समय ऊपर और नीचे बढ़ रहा है। – ATES

+0

यह कोड गणित-आधारित समाधान के लिए बहुत सटीक है। मुझें यह पसंद है! लेकिन क्या होगा जब कंटेनर में विभिन्न आकार के फोंट और छवियां होंगी? मुझे नहीं लगता कि ऊंचाई अनुपात उन विसंगतियों के लिए जिम्मेदार होगा। –

+0

उस बारे में सोचा नहीं था; मान्य बिंदु बदलता है! मुझे लगता है कि यह समाधान केवल ई-बुक जैसी सामग्री के लिए एक मौका खड़ा होगा ... आपकी टिप्पणी के लिए धन्यवाद। – user3297291

संबंधित मुद्दे