मोबाइल सफारी रीफ्लो बिना आकार के - बग्गी व्यवहार

संपादित करें 2 यह प्रश्न आईफोन पर टेक्स्ट को एक चिकनी, साफ तरीका ढूंढ रहा है।मोबाइल सफारी रीफ्लो बिना आकार के - बग्गी व्यवहार

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

पोर्ट्रेट में लोड

1. Portrait (after load)

घुमाएँ लैंडस्केप

2. Landscape (after rotate)

3. Landscape (after refresh)

यह चित्र को घूर्णन लेता है और फिर से वापस आकार परिवर्तन हो जाते हैं और छवि से 2

ताज़ा। यह मेरे लिए उपयोगिता मुद्दा है। पृष्ठ का आकार & एंड्रॉइड पर बढ़िया है और डेस्कटॉप पर 'पूर्ण आकार' है।

कोई भी जानता है कि मुझे क्या याद आ रही है? मैंने इसके कई पुनरावृत्तियों का प्रयास किया है और कुछ बग समाधानों के बारे में पढ़ा है। विचारों में से कोई भी परिणाम बदल नहीं रहा है। एक बग्रेपोर्ट दर्ज करने के बारे में। मेरे पास एक मीडिया है जो मीडिया क्वेरी # कंटेनर की तरह है।

संपादित करें: यह साइट मोबाइल (320 चौड़ी) के लिए बनाई गई थी। जब अंतरिक्ष उपलब्ध हो तो अंतरिक्ष के उपयोग को विस्तारित करना इच्छा है। मुख्य उद्देश्य टेक्स्ट & तत्वों को रिफ्लो करना है। तस्वीरों को देखते हुए, इनपुट लेबल के संरेखण को उनके लेबल के साथ नोटिस करें।

मैंने इस काम को करने के लिए 2 दृष्टिकोणों का प्रयास किया है। अन्य # कंटेनर चौड़ाई बदलने के लिए जावास्क्रिप्ट का उपयोग करना था। वर्तमान में इनलाइन स्टाइल शीट के अंत में निम्नलिखित मीडिया प्रश्नों का उपयोग कर रहे हैं। मैं मीडिया क्वेरी के साथ इसे हल करना पसंद करता हूं।

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <meta name="HandheldFriendly" content="True"> 
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <title>The Title</title> 
    <style type="text/css"> 
     html { 
      margin: 0; 
      padding: 0; 
     } 
     body { 
      font: 14px Verdana, Geneva, Arial, Helvetica, sans-serif; 
     } 
     #container { 
      margin: auto; 
      width: 480px; 
     ..... 
     @media screen and (max-width: 480px) { 
      body { 
       -webkit-text-size-adjust: none; 
      } 
      #container { 
       max-width: 480px !important; 
       width: 100% !important; 
      }  
     } 
     @media screen and (max-width: 320px) { 
      body { 
       -webkit-text-size-adjust: none; 
      } 
      #container { 
       max-width: 320px !important; 
       width: 100% !important; 
      }  
     } 
    </style> 
     .....

स्रोत

2012-06-11 David

मैं सिर्फ चौड़ाई या ऊंचाई नहीं बताऊंगा। जब आप ऐसा करते हैं तो यह वर्तमान पुनरावृत्ति – Sirens

@The डेवलपर को स्वत: सेट करता है, 'मतलब चौड़ाई या ऊंचाई' नहीं कहता है? मैं पेज चौड़ाई पोर्ट्रेट में 320 होना चाहता हूं, 480 लैंडस्केप में ** और ** सामग्री को सेट करने के लिए कहां और कैसे चाहता हूं। – David

एक सफलता मिली। मीडिया के प्रश्नों में बदलाव के दर्जनों के बाद, इस कोड 'टूट' है समस्या:

साथ

function orientation_change() { 
    if (window.orientation == 0 || window.orientation == 180) 
     document.getElementById("viewport").setAttribute("content", "width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=no"); 
    else if (window.orientation == -90 || window.orientation == 90) 
     document.getElementById("viewport").setAttribute("content", "width=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no");  
}

<body onload="orientation_change();" onorientationchange="orientation_change();">

मूल प्रश्न के मीडिया क्वेरी अभी भी पुनर्प्रवाहित पाठ करने के लिए शामिल किए गए हैं जब एक घूर्णन होता है। हालांकि रीफ्रेश आंशिक ब्लैक स्क्रीन समस्या समाप्त हो गई है। Apple iOS Safari Web Content Guide पर अंतर्दृष्टि मिली। विशेष रूप से, ओरिएंटेशन घटनाओं को संभालना।

मुझे उम्मीद है कि यह उत्तरदायी वेब डिज़ाइन की प्रक्रिया में सहायता करता है।

स्रोत

2012-06-11 17:20:35 David

+1 जबकि मेरी समस्या अधिक सूक्ष्म थी, मुझे अक्सर लगता है कि घूर्णन के बाद मेरा लेआउट रीफ्लोइंग नहीं कर रहा था। ऐसा लगता है कि आपका समाधान मेरा भी तय कर चुका है। धन्यवाद! – mckamey

मोबाइल सफारी रीफ्लो बिना आकार के - बग्गी व्यवहार

उत्तर

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