2015-06-08 9 views
15

कंप्यूटर पर, यह एक पाठ क्षेत्र आकार बदलने के लिए, इस तरह आसान है:किसी मोबाइल डिवाइस पर लचीला टेक्स्ट-क्षेत्र का आकार कैसे बदलें?

<textarea> 

http://jsfiddle.net/sssdpepa/

आप बस क्लिक करें और निचले दाएं कोने में बात खींचें। लेकिन मोबाइल उपकरणों पर, मैं एक ही textarea का आकार बदलने के लिए प्रतीत नहीं कर सकता। क्या मुझे कुछ याद आ रही है? या क्या मुझे मोबाइल आकार बदलने की क्षमताओं को अलग से जोड़ना है?

+1

मैंने अभी इसे अपने मोटो जी मोबाइल डिवाइस पर क्रोम में परीक्षण किया है, और टेक्स्टरेरा का आकार बदलने की कार्यक्षमता मेरे लिए काम करती है। क्या आप अधिक विशिष्टता दे सकते हैं कि यह कहां काम नहीं करता है? धन्यवाद। – karanmhatre

+1

क्या? आप इसका आकार कैसे बदलते हैं? मैंने इसे पूर्ण 5 मिनट के लिए आकार देने की कोशिश की, मेरी अंगुलियों को हर तरह से खींच लिया, लेकिन कुछ भी काम नहीं किया ... –

+0

आप टेक्स्टरेरा का आकार कैसे बदलना चाहते हैं? क्षैतिज या लंबवत? – Mitul

उत्तर

2

मुझे नहीं लगता कि यह छोटा हो सकता है, सीएसएस में पंक्तियों/कोल्स संशोधित करने से इसकी नज़र बदलती नहीं है। हालांकि आप इसे बड़ा बना सकते हैं (उपरोक्त गुणों का उपयोग करके), और इसे स्क्रीन आकार पर निर्भर होने के लिए सेट करें। देखें:

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

+0

मैं मैन्युअल आकार बदलने के बारे में बात कर रहा हूं, उत्तरदायी आकार बदलने का नहीं। मैं अपनी अंगुली का उपयोग करके मोबाइल टेक्स्टरेरा को बड़ा बनाने में सक्षम होना चाहता हूं, जैसे कि मैं कंप्यूटर पर इसे बड़ा बनाने के लिए अपने माउस का उपयोग कर सकता हूं। –

+0

आकार बदलें: आप जो चाहते हैं वह दोनों है, मुझे पूरा यकीन है। बस सावधान रहें कि यह आईई या ओपेरा – ActionON

+0

पर समर्थित नहीं है आपकी उंगली से स्वाइप करना और खींचना अभी भी आकार बदलने के साथ बॉक्स का आकार बदलने के लिए कुछ भी नहीं करता है: दोनों। –

4

अधिकांश मोबाइल ब्राउज़रों सीएसएस resize संपत्ति का समर्थन नहीं करते हैं - जो बहुत बात है कि आप आकार करने योग्य textareas देता है।

चेक बाहर जो समर्थन आकार बदलने ब्राउज़र: http://caniuse.com/#search=resize

वहाँ "मोबाइल का आकार बदलने के जोड़ें" करने के लिए कोई आसान तरीका है। मुझे लगता है कि आप अभी भी एक हैकी तरीके से ऐसा कर सकते हैं, लेकिन अत्यधिक अनुशंसित नहीं है। तर्क शायद इस तरह कुछ होगा:

  1. resize:none सेट करें।
  2. नीचे दाईं ओर थोड़ा आकार बदलने वाला टैब बनाने के लिए HTML + CSS + एक img (SVG) का उपयोग करें।
  3. अपने आकार बदलने वाले टैब पर ड्रैग ईवेंट (आपको कस्टम टच इवेंट लाइब्रेरी की आवश्यकता हो सकती है) सुनने के लिए जेएस का उपयोग करें।
  4. श्रोता तर्क:
    • ड्रैग-डाउन दूरी से ड्रैग-वाई दूरी से तत्व की ऊंचाई बढ़ाएं, लेकिन सीएसएस/शैली अधिकतम ऊंचाई से आगे बढ़ें नहीं।
    • खींचें यदि ड्रैग ऊपर है तो ड्रैग-वाई दूरी से तत्व की ऊंचाई घटाएं, लेकिन सीएसएस/शैली न्यूनतम ऊंचाई से कम न करें।
    • इसी तरह, ड्रैग दाएं होने पर चौड़ाई बढ़ाएं, लेकिन सेट अधिकतम-चौड़ाई से आगे बढ़ें नहीं।
    • इसी प्रकार, बाईं ओर ड्रैग होने पर चौड़ाई कम करें, लेकिन सेट न्यूनतम-चौड़ाई से कम न करें।
    • यदि मूल तत्व चौड़ाई/ऊंचाई तय है, तो उपयोगकर्ता को मूल आयामों से परे आकार देने दें।
    • यदि माता-पिता ऑटो चौड़ाई/ऊंचाई है, तो तत्व के आयाम परिवर्तन माता-पिता के किनारों से अधिक होने के लिए आपको स्क्रॉल स्थिति समायोजित करना पड़ सकता है। (आपको यह देखने के लिए कुछ फ़ील्ड परीक्षण भी करना पड़ सकता है कि क्या पैरेंट एलिमेंट के स्क्रॉल को बदलना है/स्क्रॉल लिफ्ट आपके ड्रैग डिटेक्शन को स्क्रू करता है)।

सभी सब में, मैं इसे मोबाइल पर लागू करने के लिए इसके लायक नहीं है कहेंगे। सीमित स्क्रीन अचल संपत्ति पर विचार करते हुए, मोबाइल पर आकार बदलने की अनुमति देने के लिए शायद यह भी अच्छा है। आईई/एज ब्राउज़र के लिए, सीएसएस मॉड्यूल विनिर्देशों को अंतिम रूप देने के लिए प्रतीक्षा करें और एमएस शायद इसे लागू करेगा।

2

आप का उपयोग टेक्स्टरीए के लिए संपत्ति का आकार बदल सकते हैं जो आईई को छोड़कर सभी ब्राउज़रों में ठीक काम करता है। सभी ब्राउज़रों के साथ संगत बनाने के लिए आप इसे प्राप्त करने के लिए नीचे Jquery UI प्लगइन का उपयोग कर सकते हैं।

http://jqueryui.com/resizable/

0

आप jQuery यूआई टच पंच पुस्तकालय (http://touchpunch.furf.com)

jQuery यूआई टच पंच का उपयोग कर सकते एक छोटे से हैक का उपयोग साइटों पर स्पर्श घटनाओं के उपयोग में सक्षम बनाता है jQuery यूआई यूजर इंटरफेस पुस्तकालय।

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