एचटीएमएल/सीएसएस: मोबाइल डिवाइस में टेबल फ़ॉन्ट आकार अलग

मैं एक साधारण वेबसाइट बनाना चाहता हूं जो डेस्कटॉप और मोबाइल ब्राउज़र दोनों पर काम करे, और एक अजीब (रूकी) समस्या का सामना करना पड़े: जब मेरे पास एक टेबल है जिसके कॉलम ग्रंथ हैं अलग-अलग लंबाई, मोबाइल डिवाइस में प्रस्तुत फ़ॉन्ट आकार नाटकीय रूप से अलग हैं। कोई विचार यह क्यों हो रहा है और एक त्वरित और साफ फिक्स क्या है? आपकी सहायता के लिये पहले से ही धन्यवाद!एचटीएमएल/सीएसएस: मोबाइल डिवाइस में टेबल फ़ॉन्ट आकार अलग

एचटीएमएल कोड:

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
    body { 
     font-family: Verdana, Geneva, Arial, sans-serif; 
     font-size: medium; 
    } 
    table, td { 
     border: 1px solid black; 
    } 
    </style> 
    </head> 
    <body> 
    <table> 
     <tr> 
     <td>Short text. Short text</td> 
     <td>Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. </td> 
     </tr> 
    </table> 
    </body> 
</html>

डेस्कटॉप ब्राउज़र पर

desktop

मोबाइल ब्राउज़र पर अजीब फ़ॉन्ट आकार (क्रोम एमुलेटर)

mobile

स्रोत

2014-11-22 Ying Xiong

क्या एमुलेटर कोशिश आप की बात कर रहे हैं? यह किसी और चीज की बजाय एमुलेटर में एक बग प्रतीत होता है। –

मैं Google क्रोम मोबाइल एमुलेटर का उपयोग कर रहा था, और नहीं, यह एक बग नहीं है --- मैंने अपने स्मार्ट फोन पर एक ही प्रतिपादन प्रभाव देखा (और इसलिए मैंने इसे ठीक करने के लिए सेट किया)। –

आप सही हैं, एंड्रॉइड पर क्रोम में वास्तव में यह विषमता होती है (और उत्तर में सुझाए गए 'मेटा' टैग को ठीक करता है)। –

आप की जरूरत है ठीक रेंडर एस पर विचार करने के लिए अपने आवेदन के व्यूपोर्ट को etting। मोबाइल-अनुकूल वेब एप्लिकेशन बनाने के लिए, आपको इसे अपने शीर्षकों में सेट करने की आवश्यकता हो सकती है। आप अपने <head> टैग के बीच <meta> टैग जोड़ कर ऐसा कर सकते हैं।

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head>

क्या करने वाला व्यूपोर्ट है और यह कैसे किया जाता है, तो आप के रूप में यह पहली सफारी मोबाइल के लिए पेश किया गया था Apple डेवलपर से लेख Configuring the Viewport यात्रा कर सकते हैं का पूरा विवरण के लिए: यहाँ एक उदाहरण है।

स्रोत

2014-11-22 05:23:17

धन्यवाद @ अबेल, लेकिन फ़ॉन्ट आकार बदलना मेरी समस्या का समाधान नहीं करता --- एमुलेटर के पास अभी भी दो कॉलम पर अलग-अलग फ़ॉन्ट आकार हैं। –

@YingXiong मेरे संपादित उत्तर पर एक नज़र डालें यदि यह आपके लिए काम करता है –

हाँ, '' टैग प्रतिपादन को सुधारता है। यदि आप कृपया उस टैग पर कुछ और स्पष्टीकरण जोड़ सकते हैं, तो मैं वास्तव में इसकी सराहना करता हूं! –

इस

body { 
    font-family: Verdana, Geneva, Arial, sans-serif; 
    font-size: 15px; 
}

स्रोत

2014-11-22 07:34:18

धन्यवाद, @Reza, लेकिन फ़ॉन्ट आकार सेट करने से मेरी समस्या हल नहीं होती है। –

एचटीएमएल/सीएसएस: मोबाइल डिवाइस में टेबल फ़ॉन्ट आकार अलग

उत्तर

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