एंड्रॉइड ऑटोफिट मोड वेब पेज में सीएसएस चौड़ाई के साथ समस्याएं पैदा करता है

Question

मुझे एंड्रॉइड ब्राउज़र की ऑटो आकार बदलने की सुविधा के साथ समस्याएं आ रही हैं। जब डिवाइस पोर्ट्रेट मोड में होता है तो मेरी साइट पर चौड़ाई थोड़ी गड़बड़ी कर रही है।

मैं करना चाहते हैं क्या

• डेस्कटॉप और मोबाइल दोनों उपयोगकर्ताओं के लिए साइट के एक ही संस्करण है है।
• उपयोगकर्ता को कृपया ज़ूम इन और आउट करने दें।

मैं वर्तमान में मैं निम्न ब्लॉग पोस्ट जो मेरी समस्या का वर्णन पाया मेरे सिर

<meta name="viewport" content="width=1100"> 

में निम्नलिखित है।

यह निश्चित रूप से स्वतः फ़िट लेआउट ("kLayoutFitColumnToScreen" एंड्रॉयड वेबकिट स्रोत कोड में) के कारण होता है। बस ऑटो-फिट अक्षम के साथ परीक्षण का प्रयास करें और सबकुछ सही ढंग से प्रदान किया जाता है (कम से कम मेरे एंड्रॉइड डिवाइस पर)।

एंड्रॉइड पर ऑटो-फिट मोड कुछ तत्वों की चौड़ाई को उनकी स्थिति को प्रभावित किए बिना, या अन्य तत्वों की स्थिति को कम करने के लिए प्रतीत होता है। तो यदि आपके पास चौड़ाई वाला एक ब्लॉक है: 1000px और पाठ जो उस चौड़ाई का 100% फैलाता है, कंटेनर 1000px चौड़ा रहता है लेकिन इसके अंदर का पाठ स्क्रीन चौड़ाई पर लपेट जाएगा।

http://www.quirksmode.org/blog/archives/2009/09/css_width_unrel.html

वहाँ में लात से इस autofit मोड को रोकने के लिए कोई तरीका है? मैं ज़ूमिंग को अक्षम नहीं करना चाहता हूं।

अद्यतन:

मैं अभी भी एक समाधान के लिए खोज कर रहा हूँ किसी को भी एक के जानता है। लगभग

है, एक ही समस्या के साथ किसी (हालांकि वे तालिकाओं का उपयोग कर रहे हैं)

Spanned columns collapsing on Android web-browser (when using auto-fit pages)

http://code.google.com/p/android/issues/detail?id=22447&can=4&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars

Answer 1

पिक्सल के बजाय% में Width दे पाया width:100%;

Answer 2

की तरह मेरे पास है पी टैग और ली के साथ एक ही समस्या वे आसपास के कंटेनर के बाद बहुत छोटी हैं, लेकिन केवल एंड्रॉइड 4.x के साथ। एंड्रॉइड 2.3.एक्स और एंड्रॉइड 3.x "ऑटो-फिट पेज" के साथ कोई नकारात्मक साइड इफेक्ट नहीं है।

ऐसा लगता है कि उन्होंने कुछ सुधारने की कोशिश की, लेकिन यह पहले से बेहतर काम करता है, यह कष्टप्रद है।

Answer 3

हां ऐसा लगता है कि एंड्रॉइड 4.x कारण में है। वास्तव में कष्टप्रद क्योंकि यह डिफ़ॉल्ट व्यवहार है! यह मेरी सभी वेबसाइटों को पूरी तरह नष्ट कर देता है ...

मुझे इस समय कोई समाधान नहीं मिला। जब आप क्षेत्र क्षेत्र को टैप करते हैं तो आपकी स्क्रीन की चौड़ाई के साथ पाठ को फिट करना उचित व्यवहार है। ऐसा लगता है कि ज़ूम नहीं होने पर भी यह सुविधा सक्रिय है।

Answer 4

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

Answer 5

मुझे इस समस्या का सामना करना पड़ रहा है और मुझे एक समाधान मिला जो मेरे लिए काम करता है।

मेरे पास एक मुख्य <div> है जिसमें कुछ नेस्टेड <div> तत्व शामिल हैं। एचटीएमएल बहुत बुनियादी है। मैंने पाया कि मेरे <div> के भीतर एक <div> अपना टेक्स्ट लपेट लेगा जैसे कि मैंने टेक्स्ट को ज़ूम इन करने के लिए डबल-टैप किया था। यह <div> केवल टेक्स्ट था। यह व्यवहार केवल पोर्ट्रेट अभिविन्यास में हुआ, और इसे डबल-टैपिंग या स्विचिंग अभिविन्यास के बाद ठीक किया गया।

चूंकि यह समस्या एक एंड्रॉइड बग है, कोई सीएसएस या एचटीएमएल वास्तव में इसे ठीक नहीं कर सकता है। हालांकि, निम्नलिखित सीएसएस ने मेरे लिए संतोषजनक रूप से समस्या का समाधान किया; और मुझे "ऑटो-फिट पेज" बंद करने की आवश्यकता नहीं थी:

मैंने <div> पर एक सीएसएस background-image जोड़ा। मैंने पृष्ठभूमि के रूप में एक पारदर्शी, एक पिक्सेल पीएनजी का उपयोग किया।

div { background-image: url(../img/blank.png); }

Answer 6

मैं बस एक दोहराया पृष्ठभूमि के रूप में कोई पारदर्शी PNG छवि जोड़ें। यह एच 1, एच 2, एच 3 ... टैग्स के लिए भी काम करता है जो एक ही संकीर्ण कॉलम समस्या से पीड़ित लगते हैं। एक पारदर्शी पीएनजी का उपयोग करके, यह मुझे अभी भी पृष्ठभूमि रंग असाइन करने या तत्व के पीछे जो कुछ भी दिखाता है उसे दिखाने की अनुमति देता है। यह सही नहीं है, लेकिन यह सबसे सरल समाधान है जो मैंने पाया है कि किसी भी ब्राउज़र-विशिष्ट हैक पर भरोसा नहीं करता है और मैंने देखा है कि अन्य सभी मोबाइल ब्राउज़रों में अच्छा काम करता है।

हालांकि, मैंने स्पैन टैग पर भी वही व्यवहार देखा है, और उपरोक्त इस तत्व के लिए काम नहीं कर रहा है ... अजीब!

Answer 7

मैं सिर्फ यह पुष्टि करना चाहता था कि डेलबर्ट का समाधान ही एकमात्र चीज थी जो मेरे लिए काम करती थी। यह पूरी तरह से स्पष्ट नहीं है कि यह क्यों काम करता है, लेकिन यह काम करता है। मैंने इस मुद्दे पर कुछ काफी संपूर्ण खोज की है, और टॉम की मूल पोस्ट के लिंक में सब कुछ शामिल है।

* { background-color: transparent; } मेरे लिए काम नहीं किया:

क्या इसके लायक है के लिए, मैं कुछ <p> टैग <div> टैग की एक श्रृंखला के भीतर गहरा नेस्ट प्रस्तावित समाधान यहाँ से कुछ का उपयोग कर की चौड़ाई को सही करने में काफी कुछ आक्रामक प्रयास करने की कोशिश की। हालांकि, * { background-image: url("/image/pixel.png"); मेरे लिए काम किया गया है (जहां pixel.png एक 1x1 पारदर्शी पीएनजी है)। अंततः मैंने इसे अपने घोंसले <p> टैग पर लागू करने के लिए आराम दिया, और पाया कि मेरे अनुच्छेद आखिरकार इच्छित, सही चौड़ाई में फैले हुए थे।

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

टिप के लिए डेलबर्ट को फिर से धन्यवाद।

Answer 8

*{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)} 

Answer 9

यह एंड्रॉइड के साथ एक प्रोग्रामिंग समस्या प्रतीत होता है। लेकिन सेटिंग्स के तहत अपने मोबाइल ब्राउज़र में => उन्नत ऑटो-फिट पृष्ठों को अनचेक करें और इसे हल किया जा सकता है। लेकिन हम नहीं चाहते कि हमारे उपयोगकर्ता रहें। तो एक पारदर्शी पृष्ठभूमि छवि रखने के लिए एक साधारण हैक होने के समय अस्थायी समाधान के रूप में इनकार नहीं किया जाना चाहिए। मेरे उत्तरदायी विषय के रूप में एक ढांचे और ओमेगा के रूप में ड्रूपल का उपयोग करना और मेरे लेआउट क्षेत्रों और बाहरी डीआईवी को जानना {प्रदर्शन: ब्लॉक चौड़ाई: 100%} पर सेट है, यह मुझे कुछ मिनटों के लिए पागल कर देता है। लेकिन पारदर्शी छवि अच्छी तरह से काम किया।

Answer 10

बस ऊपर दिए गए उत्तरों को आगे बढ़ाने के लिए जो मेरे लिए एक महत्वपूर्ण चेतावनी के साथ काम करता है: IE8 में रेड्रा टाइम 1x1 पारदर्शी पिक्सेल विधि को उस सभ्य आकार कैनवास पर उस लक्ष्य पर अनुपयोगी बनाता है।

के बाद से सीएसएस स्वतः फ़िट, या एंड्रॉयड ब्राउज़रों पहचान नहीं कर सकता (क्रोम Android पर वैसे भी ठीक लग रहा है), मेरे वैकल्पिक हल

1. लक्ष्य छोटे उपकरणों के लिए (के बाद से IE8 डेस्कटॉप हो जाता है) था, और
2. केवल प्रासंगिक 'पी' टैग को लक्षित करता है (ऑटोफिट केवल कुछ 'पी' टैग को लक्षित करता है), इसलिए यदि हम इस फिक्स को केवल तभी लागू करते हैं जहां इसकी आवश्यकता होती है तो हम जितना संभव हो उतना कम रेड्रो प्रदर्शन प्रभाव रखते हैं।

मेरे वैकल्पिक हल (ऊपर Demetic के जवाब के आधार पर):

/* work around mobile device auto-fitting */ 
@media only screen and (max-device-width: 800px) { 
    #content p { 
     background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); 
     background-repeat:repeat; 
    } 
} 

मेरी वेबसाइट '#content' पर है, जहां 'पी' टैग रहते ऑटो फिट किया जा रहा है कि, स्वाभाविक रूप से आप आवश्यकता होगी इसे बदलने के लिए। 'बॉडी' काम करेगा, हां, लेकिन रेड्रा समय पर कम प्रभाव जितना अधिक होगा।

पोर्ट्रेट-केवल पहचान मोड में जोड़ने के लायक हो सकता है क्योंकि ऑटो-फिट परिदृश्य में लक्षित नहीं लगता है - लेकिन मैंने यह सुनिश्चित करने के लिए पर्याप्त उपकरणों पर इसका परीक्षण नहीं किया है कि यह हमेशा सत्य है।

Answer 11

मैंने टीडी पर एक न्यूनतम चौड़ाई और चौड़ाई निर्धारित की है जहां मेरी ईमेल सामग्री रहता है और अब एंड्रॉइड के जीमेल ऐप में ठीक काम कर रहा है जहां संस्करण ऑटोफिट मोड का उपयोग करते हैं।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Gmail Issue</title> 
    </head> 
    <body> 
    <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
     <tr> 
     <td width="50%" valign="top"></td> 
     <td width="1100" valign="top" style="min-width:1100px;"></td> 
     <td width="50%" valign="top"></td> 
     </tr> 
    </table> 
    </body> 
</html> 

Answer 12

एक बात निश्चित, स्वतः फ़िट 'सुविधा' डेवलपर्स के लिए भूरे बालों का एक बहुत उत्पन्न कर रहा है है।

मैंने अपने ईमेल के शीर्ष पर एक पारदर्शी छवि, 1 पिक्सेल लंबा और 650 पिक्सल चौड़ा (मेरे ईमेल की चौड़ाई) डालने से इस मुद्दे को हल किया।

ऑटो-फिट सक्षम होने के साथ ही मेरा ईमेल अब प्रस्तुत करता है जैसा कि यह माना जाता है।

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center"> 
    <tr> 
    <td width="100%" valign="top" bgcolor="#ffffff" style="padding-top:20px"> 

     <!-- HERE'S THE MAGIC -->  
     <table width="650" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td height="1"> 
      <img src="spacer.png" width="650" height="1" style="width:650px; height:1px;" /> 
      </td> 
     </tr> 
     </table> 
     <!-- END THE MAGIC --> 

     <!-- Start Wrapper--> 
     <table width="650" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td > 
      REST OF EMAIL HERE 
      </td> 
     </tr> 
     </table> 
     <!-- End Wrapper--> 
    </td> 
    </td> 
</table> 

Answer 13

अपने सीएसएस में पृष्ठभूमि छवि जोड़कर, ऑटो-फिट अक्षम हो जाएगा।

अन्य पोस्टर्स ने एक पिक्सेल पारदर्शी पृष्ठभूमि जोड़ने का सुझाव दिया है, लेकिन आप वास्तव में अपने सीएसएस स्टाइलशीट के शीर्ष पर एक खाली पृष्ठभूमि छवि जोड़ सकते हैं और अतिरिक्त http अनुरोध और पुन: क्रॉल छोड़ सकते हैं।

div, p { 
background-image: url(); 
} 

मैं अपने एमुलेटर और मेरे आकाशगंगा SII में यह परीक्षण किया है और यह एक वास्तविक URL जोड़ने के समान काम करने के लिए लगता है।