2014-09-05 8 views
7

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

मेरी कोशिकाओं में टेक्स्ट सभी एक ही एचटीएमएल सीएसएस मेकअप का उपयोग करते हैं। पहली पंक्ति में पाठ ठीक है

लेकिन अगली पंक्ति एक समस्या है जो इसे दो कोशिकाओं में विभाजित है। बायां सेल एक तस्वीर है और दाएं सेल में कुछ पाठ है। मेरी समस्या यह है कि अधिकांश मोबाइल वेब ब्राउज़र उस सेल में फ़ॉन्ट आकार को स्केल करते हैं।

मेरे लिए यह ठीक होगा अगर वह टेक्स्ट थोड़ा और लाइनों पर फैल जाएगा लेकिन ऐसा नहीं होता है, तो वे डेस्कटॉप ब्राउज़र दृश्य जैसी ही रेखाएं बनाए रखते हैं।

मैं pt पिक्सल और इस्तेमाल

.DefaultFont 
{ 
font-family: 'Merriweather Sans', Arial,verdena,sans-serif; 
font-size: 13pt; 
font-style: normal; 
color:#4e0203; 
font-weight: 400; 
} 

तरह सीएसएस फ़ाइल में कोई प्रभाव नहीं 13pt 13em और अन्य तरीकों आदि कुछ भी नहीं काम का उपयोग कर फ़ॉन्ट आकार निर्धारित किया है।

और एचटीएमएल तत्व के लिए अवधि और div और p का उपयोग किया और इसे टीडी तत्व के अंदर करने की कोशिश की, लेकिन फिर से कोई प्रभाव नहीं पड़ा।

पीएस मैं डिवाइस पहचान के साथ पेज क्लाइंट साइड स्केल करने के लिए जावास्क्रिप्ट चाल की तलाश नहीं कर रहा हूं। क्योंकि मैं बस यह निर्धारित करने के लिए PHP का उपयोग करता हूं कि यह डेस्कटॉप या मोबाइल डिवाइस है (जिसके लिए कम कोड संचरित होना आवश्यक है)। मुझे सिर्फ कोड की आवश्यकता है ताकि फ़ॉन्ट मोबाइल वेब ब्राउज़र के कारण बदल न सके।

मैं उन ग्राहकों को तालिकाओं के हिस्सों को पुन: सहेजने से कैसे रोकूं?


समाधान अंतिम समाधान है कि यहां वास्तव में अच्छा काम किया है एक से अधिक लोगों का एक संयोजन था।

  • सेट तालिका चौड़ाई VW (जो% की तरह यह भी एक 100 सूचकांक है) में
  • सेट फ़ॉन्ट आकार% में की, 2 या तो की तरह एक कम मूल्य।
  • नोट vw बहुत अधिक द्वारा समर्थित है तो बस फ़ॉन्ट आकार, छवियों।
  • में मेटा टैग शामिल है जो इसके बाद भी इसके बिना काम करता है, लेकिन सुरक्षित पक्ष पर रहने के लिए मैं इसकी अनुशंसा करता हूं।
+0

क्या आप इस मामले को http://jsfiddle.net से दोहरा सकते हैं? – easwee

+0

क्या आपने HTML फ़ॉन्ट-आकार सेट करने का प्रयास किया है, फिर अन्य तत्व फ़ॉन्ट-आकार बनाएं: 1em ;? – Roi

+0

अपनी तालिका कक्षों के लिए% आधारित मानों का उपयोग करने का प्रयास करें। – designcise

उत्तर

4

करना चाहिए शायद तुम font-size के लिए व्यूपोर्ट आकार टाइपोग्राफी इकाइयों का उपयोग करना चाहिए।

इसका उपयोग तब किया जा सकता है जब आप व्यूपोर्ट (तत्व कंटेनर) चौड़ाई या ऊंचाई के माध्यम से आकार की चीज़ बनाना चाहते हैं। या दोनों, उस मामले के लिए। संभावित मान हैं:

VH - व्यूपोर्ट की ऊंचाई
यह कंटेनर की ऊंचाई तक proportionaly आकार।

font-size: 2vh; 

VW - व्यूपोर्ट की चौड़ाई
यह कंटेनर की चौड़ाई के proportionaly आकार।

font-size: 2vw; 

vmin - व्यूपोर्ट की न्यूनतम
यह VH 'और' VW 'के बीच छोटे को proportionaly आकार।

font-size: 2vmin; 

VMAX - व्यूपोर्ट का अधिकतम
यह आकार proportionaly करने के लिए 'VH' और 'VW' के बीच बड़ा।

font-size: 2vmax; 

यह निश्चित रूप से आपको वह दिख सकता है जो आप चाहते हैं। बस वर्तमान आनुपातिक मूल्य पाएं, और स्क्रीन के आकार से कोई फर्क नहीं पड़ता, यह फिट होगा!

W3 viewport relative length's docs

+0

मेरे देर से उत्तर के लिए खेद है मैं अभी तक 100% काम नहीं कर रहा हूं (बीमार)। खैर मुझे यह कहना है कि यह फोंट स्केलिंग का एक अच्छा तरीका है, और यह टेबल चौड़ाई का भी समर्थन करता है। काफी अच्छा। हालांकि मुझे अभी भी तालिका के एक सेल में समस्या मिली है जो यह छोटा दिखता है। साइट को देखते हुए मोबाइल को देखते हैं। मुझे यह vmin विधि का उपयोग करके काम करना अच्छा लगेगा। – user613326

+0

वैसे मुझे सीएसएस में vw का उपयोग करने पर आपकी टिप को जोड़ना पड़ा। % चौड़ाई के रूप में तालिका चौड़ाई का उपयोग करने के साथ मिलकर।प्रतिशत और वीडब्ल्यू मूल्य दोनों में सौ पैमाने है ताकि यह एक साथ अच्छा काम करे। फिर मुझे @ मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-स्केल = 1">> श्रीनिवास द्वारा समझाया गया था। परिणाम एक साथ शानदार है, इसके स्केल केवल सीएसएस और मेटा टैग स्क्रिप्टिंग के बिना स्वचालित हैं। मैं आपको इनाम देना चाहता हूं क्योंकि यह एक अच्छी अच्छी टिप थी, हालांकि अंत में मुझे सभी युक्तियों को एक साथ जोड़ना था ताकि इसे इरादे से काम किया जा सके। आपकी टिप ने इसे सुपर के इरादे से परे काम किया! – user613326

+0

थोड़े आश्चर्यजनक मैंने पाया कि इस प्रश्न में अब 2500 विचार हैं (24-10-2017) – user613326

5

आप मेटा टैग करने की कोशिश की है, अगर यह काम करता है की जाँच करने के

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

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

चेक आउट, यह सहायक हो सकता है ..

+0

मैं अभी बंद हो रहा हूं, सबसे पहले मुख्य तालिका तय की गई थी और उपरोक्त विकल्प के साथ यह मोबाइल के अंदर फिट नहीं हुआ था, अब मैं इसे @ एलसीएसलाजार के साथ ट्यून करने में हूं; साइट troughout। मैं अन्य प्रारूपों में सभी निश्चित आकारों को हटाने के लिए काम करता हूं लेकिन अब तक यह सही तरीके से चल रहा है। – user613326

+0

चूंकि उत्तर आप और एलसीएसलाजार दोनों का संयोजन था, इसलिए मैंने उन्हें वोट दिया क्योंकि आपके पास पहले से ही 25 अंक थे, मुझे वास्तव में डिजाइन के लिए दोनों की आवश्यकता थी। आपकी टिप के लिए धन्यवाद .. ओह और बीटीडब्ल्यू ने 0.7 या 1.5 की तरह लेस के शुरुआती पैमाने पर सेटिंग को पुरानी समस्या वापस दे दी है, प्रारंभिक-स्केल 1 ने अपने टेबल को मोबाइल उपकरणों पर बड़े पैमाने पर बनाया है, इसलिए मैंने टेबल को 90% सेट किया है (के लिए थोड़ी सी पृष्ठभूमि भी) और सीएसएस vw द्वारा फ़ॉन्ट आकार, और छवियों को भी vw करने के लिए, इस टेप को किसी भी डिवाइस पर अच्छी तरह से स्केल करें। अधिकांश चीजें vw या% के साथ ठीक हो जाती हैं, कुछ iframe ऊंचाई – user613326

0

मुझे लगता है कि इस चाल

-webkit-text-size-adjust: none; 
+0

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

0

आप window.innerHeight उपयोग कर सकते हैं।

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