हमने पहले से ही उन तरीकों (
मोबाइल फर्स्ट और
रिस्पॉन्स वेब डिज़ाइन ) के बारे में
लिखा है, जिनका उपयोग हम अपनी सेवा को विकसित करते समय करते हैं। इस लेख में मैं आपके साथ अपना अनुभव साझा करना चाहता हूं। सिद्धांत में जो सरल लगता है वह कभी-कभी व्यवहार में दुःस्वप्न में बदल जाता है। यह इस बारे में होगा कि हम एक सार्वभौमिक वेब सेवा बनाने का प्रबंधन कैसे करते हैं जो बड़ी संख्या में उपकरणों पर काम कर सकती है।
ब्राउज़र सहायता कक्षाएं
बाजार में हजारों डिवाइस हैं, कई प्लेटफॉर्म और मोबाइल ब्राउज़र हैं। आइए मोबाइल ब्राउज़रों के वैश्विक प्रचलन आंकड़ों पर नजर डालें। ग्राफ
पिछले वर्ष के लिए स्टेटकाउंटर डेटा दिखाता है। हम नेताओं में रुचि रखते थे - ओपेरा, मोबाइल सफारी, एंड्रॉइड और नोकिया (ओपेरा को छोड़कर सभी में वेबकीट इंजन पर चलने वाला ब्राउज़र है)।
हमने याहू से
वर्ग ब्राउज़र समर्थन का विचार उधार लिया है जो निम्नलिखित तीन वर्गों को परिभाषित करता है:
- क्लास सी ब्राउज़र को जावास्क्रिप्ट और सीएसएस प्राप्त नहीं होते हैं। इस वर्ग का समर्थन करके, हम गारंटी देते हैं कि किसी भी उपयोगकर्ता को सामग्री प्राप्त होगी। हमने इंटरनेट एक्सप्लोरर 7 वें संस्करण को शामिल किया और इस वर्ग में कम किया।
- कई मानकों का समर्थन करने वाले सबसे आम ब्राउज़र "ए" श्रेणी में आते हैं। इन ब्राउज़रों का परीक्षण करना आवश्यक है। हमने इंटरनेट एक्सप्लोरर 8 और 9 और क्रोम, सफारी, फ़ायरफ़ॉक्स, ओपेरा, ओपेरा मोबाइल और ओपेरा मिनी 4 और 6 के नवीनतम स्थिर संस्करणों को इस वर्ग में शामिल किया है।
- कक्षा "X" में वे ब्राउज़र शामिल हैं जो दोनों वर्गों से गायब हैं। ये, एक नियम के रूप में, वर्ग "ए" के ब्राउज़रों के पुराने संस्करण और उनके नवीनतम अस्थिर संस्करण हैं। इस वर्ग में एक ब्राउज़र को परिभाषित करते समय, हम मानते हैं कि इसमें कोई गंभीर त्रुटि नहीं होगी। इन ब्राउज़रों में हम परीक्षण नहीं करते हैं।
इस प्रकार, "सी" वर्ग के लिए समर्थन प्रदान करते हुए, हम गारंटी देते हैं कि सामग्री उपयोगकर्ता द्वारा प्राप्त की जाएगी और वह उसके साथ काम करने में सक्षम होगा। इसका मतलब है कि छवियों, जावास्क्रिप्ट और सीएसएस को प्रदर्शित करने के लिए समर्थन के बिना, उपयोगकर्ता सामग्री को नेविगेट करने में सक्षम होगा। यह वर्ग "ए" और पूरे आवेदन का आधार है।
हमने संस्करण 8 से नीचे IE ब्राउज़रों के लिए CSS और जावास्क्रिप्ट को निष्क्रिय करने के लिए विशेष सशर्त टिप्पणियों का उपयोग किया। कोई भी "सही" ब्राउज़र इन टिप्पणियों के अंदर जो लिखा गया है उसे अनदेखा कर देगा और सभी आवश्यक फाइलों को शैलियों और लिपियों से जोड़ देगा।
<!DOCTYPE html> <html><head> <link type="text/css" ... /> <script ...></script> </head><body> ... </body></html>
उत्तरदायी डिजाइन
वेब डिज़ाइन के लिए बुनियादी आवश्यकताओं के बारे में कुछ शब्द। सबसे पहले, यह डेस्कटॉप पर साइट के मोबाइल संस्करण को देखने पर "पिक्सेल परिपूर्ण" है (अर्थात, लेआउट और लेआउट के पिक्सेल-बाय-पिक्सेल पत्राचार का पालन करना आवश्यक था)। दूसरे, स्पर्श उपकरणों के लिए समर्थन। और तीसरा, न्यूनतम समर्थित स्क्रीन रिज़ॉल्यूशन 240 पिक्सेल चौड़ा था।
यह 240 क्यों है? तथ्य यह है कि यह तीसरी पीढ़ी के S60 प्लेटफ़ॉर्म पर Nokia फोन की स्क्रीन की चौड़ाई है, जो 2006 में जारी किया गया था, और (ध्यान!) बोर्ड पर एक WebKit ब्राउज़र के साथ, जो कि CSS3 और JavaScript 1.5 के लिए आंशिक समर्थन के साथ है। बाजार में कम स्क्रीन रिज़ॉल्यूशन वाला मोबाइल फोन ढूंढना बहुत मुश्किल है, जिसका इस्तेमाल इंटरनेट सर्फिंग के लिए किया जाएगा।
रबर लेआउट जिस पर उत्तरदायी वेब डिज़ाइन बनाया गया है वह "पिक्सेल परफेक्ट" के लिए उपयुक्त नहीं है, अन्य बातों के अलावा, हमें सामग्री के साथ टेप के स्थान को सीमित करने की आवश्यकता है। इसलिए, न्यूनतम और अधिकतम स्वीकार्य चौड़ाई को इंगित करते हुए, हमें कुछ चरम मूल्यों तक सामग्री के साथ एक ब्लॉक मिला।
छोटी स्क्रीन के लिए, हम मीडिया क्वेश्चन का उपयोग करते हुए मुख्य ब्लॉक के इंडेंटेशन वैल्यू को कम करते हैं। और सामान्य तौर पर, जब हम किसी प्रकार के ब्लॉक को विकसित करना शुरू करते हैं, तो हम यह निर्धारित करते हैं कि इसे कम स्क्रीन रिज़ॉल्यूशन वाले उपकरणों पर कैसे प्रदर्शित किया जाएगा, ब्लॉक के कौन से तत्व अक्षम या प्रतिस्थापित किए जाएंगे, और मीडिया प्रश्नों का उपयोग क्या होगा।
यह याद रखना महत्वपूर्ण है कि भले ही ओपेरा मिनी 4 के साथ एक 7-वर्षीय टेलीफोन मीडिया प्रश्नों का समर्थन करता है, इंटरनेट एक्सप्लोरर 8 उनका समर्थन नहीं करता है। इसलिए, इस परियोजना में हम मीडिया प्रश्नों का उपयोग नीचा दिखाने के लिए करते हैं, अर्थात्, उपकरणों के स्क्रीन आकार को कम करने के लिए।
टेप में, हम "फ्लोटिंग" छवियों का उपयोग करते हैं, जो मूल अनुपात को संरक्षित करते हुए, मूल तत्व की चौड़ाई को समायोजित करते हैं।
max-width को 100% पर सेट करके, आप छवियों को कंटेनर के छवि से व्यापक होने पर मूल आकार से बड़ा होने के लिए मना करते हैं।
नीचे दी गई छवि में, आप देख सकते हैं कि चित्र टेप के आकार के लिए संपीड़ित था, और मीडिया प्रश्नों की मदद से टेप के अंदर का इंडेंटेशन कम हो गया था और पृष्ठभूमि, छाया और पृष्ठ शीर्ष लेख तत्वों के साथ अतिरिक्त परतें छिपी हुई थीं।
मोबाइल ब्राउज़रों की विशेषताएं
आधुनिक मोबाइल ब्राउज़र उत्कृष्ट पृष्ठ दिखाते हैं जो कम रिज़ॉल्यूशन के लिए डिज़ाइन नहीं किए जाते हैं जो मोबाइल डिवाइस के पास हैं। जैसा कि आपको पता होना चाहिए, वे भौतिक संकल्प के बजाय तार्किक का उपयोग करके सफल होते हैं। उदाहरण के लिए, iPhone डिफ़ॉल्ट रूप से 980 पिक्सल की चौड़ाई के साथ एक विंडो में एक पृष्ठ प्रदान करता है और एक छोटा संस्करण दिखाता है, जिससे उपयोगकर्ता पृष्ठ के अलग-अलग वर्गों को स्केल कर सकता है। मोबाइल सेवा को विकसित करते समय, यह व्यवहार बेहद अवांछनीय है, इसलिए ब्राउज़र के लिए डिवाइस की भौतिक स्क्रीन आकार के बराबर तार्किक विंडो के आकार को निर्दिष्ट करना आवश्यक है (नीचे दिए गए उदाहरण में
device-width मूल्य इसके लिए जिम्मेदार है)।
<meta name="viewport" content=" width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0 " />
minimum-scale और
maximum-scale विकल्प स्वीकार्य पृष्ठ स्केलिंग मान निर्धारित करते हैं। यदि आप उन्हें एक के बराबर सेट करते हैं, तो आप उपयोगकर्ता को पेज स्केल बदलने से रोकेंगे। इन उद्देश्यों के लिए, एक और पैरामीटर है -
user-scalable । यदि आपके डिजाइन में एक निश्चित स्थिति वाले तत्व हैं, तो स्थिति को सक्रिय करने के लिए इस पैरामीटर को 0 पर सेट करना सुनिश्चित करें: एंड्रॉइड में निश्चित समर्थन (
minimum-scale और
maximum-scale पैरामीटर को एक ही मान पर सेट करना ऐसा नहीं करेगा)।
मोबाइल ब्राउज़र (विशेष रूप से स्पर्श डिवाइस) छद्म वर्गों का समर्थन नहीं कर सकते हैं
:hover :focus और
:active । इसलिए, यदि डिज़ाइन में कार्यक्षमता है, जो केवल मूल तत्व पर माउस को मँडरा करके दिखाने की आवश्यकता है, तो आपको डिफ़ॉल्ट रूप से दिखाई देने वाले इन तत्वों को छोड़ देना चाहिए। और पेज लोड करने के बाद, डिवाइस के प्रकार का निर्धारण करते हुए, CSS में कैस्केड का उपयोग करके उन्हें छिपाएं। उदाहरण के लिए, निम्नानुसार है:
var touch = 'ontouchstart' in window; $('html').addClass( touch ? 'touch-yes' : 'touch-no' );
.touch-no .item .item__link { display: none; } .touch-no .item:hover .item__link { display: block; }
यह निर्धारित करने के अलावा कि क्या डिवाइस टैचेव है, हम कुछ और परीक्षणों का उपयोग करते हैं, लेकिन पहले से ही उपयोगकर्ता वीडियो सामग्री को सीधे संदेश पृष्ठ पर दिखाने की क्षमता निर्धारित करने के लिए। ऐसा करने के लिए, हम यह निर्धारित करते हैं कि HTML5 ब्राउज़र वीडियो का समर्थन करता है और स्थापित फ़्लैश प्लग-इन की उपस्थिति।
var video = !!document.createElement('video').canPlayType; var flash = (typeof navigator.plugins['Shockwave Flash'] == 'object'); if (!flash && typeof window.ActiveXObject != 'undefined') try { new ActiveXObject('ShockwaveFlash.ShockwaveFlash'); flash = true; } catch (e) {}
मैं यह नोट करना चाहूंगा कि
ब्राउज़र की नाम और संस्करण को निर्धारित करने के लिए ब्राउज़र क्षमताओं की
परिभाषा पहले से कहीं अधिक बेहतर होती जा रही है । आखिरकार, हम एक ऐसी सेवा बना रहे हैं जो किसी भी उपकरण पर काम कर सकती है।
मोबाइल ब्राउज़रों में, विंडो के लिए
scroll इवेंट नहीं आ सकता है। एक उदाहरण ओपेरा मिनी है। आपको इंटरफ़ेस तत्वों को बनाते समय इस पर विचार करने की आवश्यकता है जो सक्रिय रूप से
onscroll उपयोग करते हैं। उदाहरण के लिए, फ़ीड के अगले पृष्ठ को लोड करना तब हो सकता है जब खिड़की के नीचे पहुंच जाता है। इसलिए, आपको पहले उन तत्वों को प्रदर्शित करना होगा जो यह सुनिश्चित करेंगे कि पृष्ठ जावास्क्रिप्ट या स्क्रॉल इवेंट की अनुपस्थिति में लोड होता है (उदाहरण के लिए,
feed__next-page तत्व इसके लिए जिम्मेदार है)। और ऐसे तत्वों को केवल यह सुनिश्चित करने के बाद छिपाएं कि स्क्रॉल घटना आ रही है।
<ul class="feed"> <li class="feed__item">...</li> <li class="feed__next-page">...</li> </ul>
.feed__next-page { display: block; }
$(document).one('scroll', function() { $('.feed__next-page').hide(); });
जावास्क्रिप्ट और AJAX कमाल के हैं। लेकिन आपको यह समझने की आवश्यकता है कि बड़ी स्क्रीन पर उपयोग करने के लिए सुविधाजनक सब कुछ नहीं है जो 240 पिक्सेल चौड़ी स्क्रीन पर उपयोग करना सुविधाजनक होगा। हम छोटे स्क्रीन के लिए कई गतिशील चीजों को बंद कर देते हैं, जैसे कि एक अलग पृष्ठ पर जाने के बिना स्ट्रीम में उत्तर लिखने की क्षमता (फोन पर यह इतनी सुखद कार्रवाई नहीं है, क्योंकि इंटरफ़ेस "धीमा हो जाता है" और ट्विचर्स)।
हम
प्रगतिशील संवर्द्धन की अवधारणा का पालन करते हैं, जो सभी सामग्री और कार्यक्षमता का प्रतिनिधित्व करने के लिए एक सरल अर्थ लेआउट का उपयोग करना है, और सीएसएस और जावास्क्रिप्ट में नवीनतम नवाचार केवल उपयोगकर्ता इंटरैक्शन में एक सुखद सुधार होना चाहिए। यह आपको HTML का समर्थन करने वाले किसी भी डिवाइस पर प्रोजेक्ट के काम की गारंटी देने की अनुमति देता है। इस प्रकार, कम स्क्रीन रिज़ॉल्यूशन वाले डिवाइस के लिए कुछ भारी चीजों को बंद करना मुश्किल नहीं है (एक नियम के रूप में, उनके पास कम रैम और कम प्रदर्शन है)। यहां बटन क्लिक ईवेंट हैंडलर का एक सामान्य उदाहरण है जो किसी न किसी रूप को प्रस्तुत करता है।
var desktop = screen.width > 768 && !touch; $('.button').click(function (e) { if (desktop) { e.preventDefault();
मैं यह नोट करना चाहता हूं कि हम सभी जावास्क्रिप्ट को अक्षम नहीं करते हैं - केवल ऐसे कार्य जो ऐसे मामलों के लिए विशेष रूप से बनाए गए अलग-अलग पृष्ठों पर प्रदर्शन करने के लिए अधिक सुविधाजनक होंगे।
अभ्यास
अब आइए ऐसे ही दिलचस्प बटन बनाने की कोशिश करते हैं।
बटन में ग्रेडिएंट बॉर्डर और बैकग्राउंड है, एक आइकन और टेक्स्ट है, और केवल एक आइकन या टेक्स्ट हो सकता है। यह बटन एक सामूहिक छवि की भूमिका निभाता है, जिसके उदाहरण पर मैं यथासंभव कई समस्याओं को कवर करने का प्रयास करूंगा।
हम CSS का उपयोग करके ग्रेडिएंट बनाएंगे। ऐसा करने के लिए, बटन में एक और बटन
button__inner तत्व
button__inner । चलिए नियमित लिंक को हमारे बटन की तरह बनाते हैं। इसके बाद, सीएसएस कोड प्रदान किया जाएगा जो कई गुणों, जैसे रंग और ग्रेडिएंट को छोड़ देता है, और Sass सिंटैक्स (SCSS) का उपयोग करेगा।
सैस एक सीएसएस आधारित मेटलुंगेज है जो चर, भाव, अशुद्धियों और अधिक का समर्थन करता है।
<a href="#" class="button"> <span class="button__inner"></span> </a>
.button { padding: $border-width; height: $height - $border-width * 2; } .button__inner { line-height: $height - $border-width * 2; }
आवश्यकताओं के अनुसार, बटन की
$border-width पिक्सेल की चौड़ाई के साथ होनी चाहिए, और ऊँचाई
$height पिक्सेल के बराबर होनी चाहिए। इसलिए, बटन वर्ग के लिए, हम पेंडिंग को
$border-width बराबर बनाएंगे, और आवश्यक ऊँचाई के बराबर ऊँचाई
$height माइनस पेडिंग करेंगे। बटन के अंदर के तत्वों को लंबवत रूप से संरेखित करने के लिए, जैसे कि आइकन और टेक्स्ट, हम
line-height उपयोग करते हैं, जो पूरे खाली स्थान के बराबर है।
हमारे प्रोजेक्ट पर, हम आइकन्स बनाने के लिए
IMG एलिमेंट का उपयोग नहीं करते हैं। और यहाँ क्यों है। सबसे पहले, एक बटन बनाएं जिसमें
IMG तत्व का उपयोग आइकन प्रदर्शित करने के लिए किया जाएगा। छवि के स्रोत के रूप में, हम एक पारदर्शी
background-image साथ फ़ाइल के लिए पथ निर्दिष्ट करते हैं, और सीएसएस के माध्यम से
background-image और
background-position गुण हम स्प्राइट में आइकन निर्दिष्ट करते हैं। स्प्राइट आइकन बनाने का यह शायद सबसे प्रसिद्ध तरीका है।
<a href="#" class="button"> <span class="button__inner"> <img src="empty.png" class="button__icon" alt="Icon" /> </span> </a>
.button__icon { width: ...; height: ...; background: ...; }
हमें दो कारणों से इस विकल्प को अस्वीकार करना पड़ा:
- वैकल्पिक पाठ को ब्राउज़र द्वारा प्रदर्शित नहीं किया जा सकता है (जैसा कि WebKit करता है)।
- सीएसएस अक्षम के साथ ब्राउज़रों में इस तरह के एक तत्व के कामकाज को सुनिश्चित करने का कोई तरीका नहीं है।
| IE6 | क्रोम |
|---|
 |  |
देखें कि क्रोम और IE6 में बटन कैसा दिखता है, जिसे CSS नहीं मिलता है। और नहीं, कोई गलती नहीं है - बटन बस दिखाई नहीं देगा। इसलिए,
IMG तत्वों के बजाय, हम सामान्य इनलाइन तत्वों का उपयोग करते हैं (यह
I हो सकता
I ) और, उदाहरण के लिए, उनके अंदर पाठ को छिपाने के लिए एक नकारात्मक
text-indent । अब IE6 में वैकल्पिक पाठ आइकन के स्थान पर दिखाई देगा।
<a href="#" class="button"> <span class="button__inner"> <i class="button__icon">Icon</i> </span> </a>
.button__icon { text-indent: -9999px; }
| IE6 | क्रोम |
|---|
 | |
क्या होगा यदि हमारा क्लास
button लिंक पर लागू नहीं होता है (जैसा कि हमने पहले किया था), लेकिन फॉर्म एलिमेंट - बटन?
<a href="#" class="button"> <span class="button__inner"> <i class="button__icon">Icon</i> <u class="button__text">Text</u> </span> </a> <button class="button"> <span class="button__inner"> <i class="button__icon">Icon</i> <u class="button__text">Text</u> </span> </button>
| <a> | <बटन> |
|---|
|  |
एक बटन एक कड़ी से छोटा हो जाता है (सटीक होने के लिए, फिर
button वर्ग की सीमा के दोगुने आकार के बराबर मूल्य के लिए)। तथ्य यह है कि बॉक्स मॉडल रूपों के तत्वों तक नहीं फैलता है, और उनके लिए ऊंचाई निर्धारित की जानी चाहिए, जिसमें आंतरिक इंडेंट और बॉर्डर के आकार शामिल हैं। इससे कोई फर्क नहीं पड़ता - CSS3 में एक
box-sizing संपत्ति है जो आपको डिफ़ॉल्ट मॉडल को बदलने की अनुमति देती है। इसके लिए
conten-box के मूल्य को निर्दिष्ट करते हुए, हम उन सभी तत्वों को बाध्य करेंगे जिनके लिए बॉक्स मॉडल का उपयोग करने के लिए
button वर्ग निर्दिष्ट किया जाएगा। इस उदाहरण में,
$include SASS सिंटैक्स है, तथाकथित अशुद्धियों से शैलियों को जोड़ता है जो आपको CSS गुणों को समूहित करने की अनुमति देता है। हम हमेशा ऐसे निर्माणों का उपयोग करते हैं जब सीएसएस गुणों को विक्रेता उपसर्गों की आवश्यकता होती है।
@mixin box-sizing ($value) { -webkit-box-sizing: $value; -moz-box-sizing: $value; box-sizing: $value; } .button { @include box-sizing(content-box); height: $height - $border-width * 2; }
| <a> | <बटन> |
|---|
| |
आइए अब ओपेरा मिनी में हमारे उदाहरण को खोलने की कोशिश करें।
| <a> | <बटन> |
|---|
 |  |
हम देखते हैं कि ग्रेडिएंट गायब हो गए, लेकिन यह आश्चर्यजनक नहीं होना चाहिए था। आश्चर्य की बात यह है कि
button__inner तत्व लिंक और
BUTTON तत्व में अलग-अलग तरीकों से छोटा और संरेखित हो गया है। ऐसा क्यों हुआ? तथ्य यह है कि ओपेरा मिनी वर्तमान में
line-height समर्थन नहीं करता
line-height , जिसे हमने आंतरिक तत्वों को लंबवत संरेखित करने के लिए
button__inner में उपयोग किया था। इसके बजाय, अब, उदाहरण के लिए, आपको
line-height को एक पर रीसेट करने की आवश्यकता होगी, तत्व की ऊंचाई और इसके आंतरिक मार्जिन को निर्दिष्ट करें ताकि मूल्यों के योग में पिछली
line-height प्राप्त हो।
.button__inner { line-height: 1; padding: ( $height - $border-width * 2 - $font-size )/2 0; height: $font-size; }
| <a> | <बटन> |
|---|
 | |
अधिक दिलचस्प है। ओपेरा मिनी दो रेंडरिंग मोड का समर्थन करता है, और उपयोगकर्ता को यह चुनने का अधिकार है कि उनमें से कौन सा ब्राउज़र के साथ काम करना है।
- डेस्कटॉप मोड में, पृष्ठों को बड़े ओपेरा की तरह ही प्रदर्शित किया जाता है, इस अपवाद के साथ कि ब्राउज़र फिर भी क्षैतिज स्क्रॉल की उपस्थिति को रोकने के लिए स्क्रीन की चौड़ाई में पाठ के ब्लॉक को फिट करने का प्रयास करेगा।
- दूसरा मोड मोबाइल है, जिसे ब्राउज़र सेटिंग्स से स्विच किया जा सकता है। इसमें होने के नाते, ओपेरा पृष्ठ को इस तरह से प्रारूपित करता है कि यह एक कॉलम में फिट बैठता है, अर्थात। क्षैतिज स्क्रॉल की उपस्थिति के बिना एक छोटी स्क्रीन के साथ डिवाइस पर देखना सुविधाजनक हो गया।
छवि से पता चलता है कि हमारे दो इनलाइन-ब्लॉक तत्वों को एक कॉलम में पंक्तिबद्ध किया गया था, शैलियों में दर्शाए गए आकारों को लागू नहीं किया गया था, केवल रंग योजना बनी हुई थी। तथ्य यह है कि इस मोड में ओपेरा मिनी खुद को एक हाथ में डिवाइस के रूप में परिभाषित करता है। और पृष्ठ को बाहर निकालने से रोकने के लिए, आपको शैली फ़ाइल में मीडिया प्रकार को निर्दिष्ट करने की आवश्यकता है - इस मामले में, इस फ़ाइल से डिज़ाइन को पूरी तरह से अनदेखा नहीं किया जाएगा, और पृष्ठ वैसा ही दिखाई देगा जैसा कि इसका उद्देश्य था। इसके अलावा, मीडिया प्रकार को निर्दिष्ट करने से सभी को मदद नहीं मिलती है।
<link href="..." rel="stylesheet" type="text/css" media="all, handheld" />
मीडिया के प्रश्नों और ओपेरा मिनी मोबाइल मोड के बारे में कुछ और शब्द। आइए अब आइकन के साथ बटन बनाते हैं और पाठ को स्क्रीन पर पाठ को छिपाने के लिए संकल्प के साथ 320 पिक्सेल चौड़ाई से कम या बराबर होता है:
@media screen and (max-width: 320px) { .button__text { display: none; } }
यह सरल लगता है और यहां तक कि iPhone पर भी काम करता है। लेकिन मोबाइल मोड में ओपेरा मिनी में नहीं:
यह मत भूलो कि इस मोड में ओपेरा मिनी खुद को एक हाथ में डिवाइस के रूप में परिभाषित करता है। और मीडिया के प्रश्नों में, आपको या तो स्पष्ट रूप से प्रकार को निर्दिष्ट करना होगा, या सभी को पहचानने वाले का उपयोग करना होगा।
@media handheld, screen and (max-width: 320px) { .button__text { display: none; } } @media all and (max-width: 320px) { .button__text { display: none; } }
अब मोबाइल सफारी के बारे में कुछ शब्द। आइए एक लिंक से एक बटन बनाते हैं और उस पर
click इवेंट हैंडलर को
body एलिमेंट पर सौंपते हैं।
<a class="button">...</a>
.button { }
$('body').delegate( '.button', 'click', function () {
यह jQuery का उपयोग करके नमूना कोड है, यह काम करता है, हैंडलर कहा जाता है। लेकिन यह लिंक या फॉर्म तत्व की तुलना में एक अलग तत्व पर एक बटन बनाने के लायक है, उदाहरण के लिए,
DIV , क्योंकि कोड काम करना बंद कर देता है - हैंडलर को नहीं बुलाया जाता है।
<div class="button">...</div>
.button { }
$('body').delegate( '.button', 'click', function () {
तथ्य यह है कि
click इवेंट, जिसे फॉर्म के लिंक या बटन पर निष्पादित नहीं किया गया था,
body तक नहीं जाएगा, और हमारे हैंडलर को नहीं बुलाया जाएगा। लेकिन यदि आप
cursor: pointer निर्दिष्ट करते हैं
cursor: pointer button वर्ग के लिए
cursor: pointer संपत्ति, तो
button और निहारना, सब कुछ काम करना शुरू कर देता है।
<div class="button">...</div>
.button { cursor: pointer; }
$('body').delegate( '.button', 'click', function () {
निष्कर्ष
मैं अब यह नोट करना चाहता हूं कि आधुनिक मोबाइल ब्राउज़र व्यावहारिक रूप से अपने बड़े भाइयों से नीच नहीं हैं। वही ओपेरा मिनी मीडिया प्रश्नों, आंशिक रूप से CSS3 और जावास्क्रिप्ट (सीमाओं के साथ) का समर्थन करता है। हालाँकि, मोबाइल ब्राउज़र में कुछ और बड़े अंतर हैं:
- समर्थन की
position: fixed । इस तथ्य के बावजूद कि कहीं समर्थन दिखाई दिया (iOS 5, एंड्रॉइड 3, ओपेरा मोबाइल), कार्यान्वयन लंगड़ा है और अक्सर उपयोग करना असंभव है। position: fixed ब्लॉक position: fixed अगले टच इवेंट तक स्क्रॉल करने, गायब होने और दिखाई न देने पर स्थिर स्थिर हो सकता है। यदि ब्राउज़र position: fixed समर्थन नहीं करता है position: fixed , तो तत्व ऐसा व्यवहार करता है जैसे कि उसके पास position: absolute संपत्ति सेट। overflow: scroll लिए समर्थन overflow: scroll संपत्ति। समर्थन की कमी का एक उदाहरण ओपेरा मिनी है, जहां प्रति दस्तावेज़ एक स्क्रॉल हो सकता है। यदि ब्राउज़र overflow: scroll समर्थन नहीं करता है overflow: scroll , तो तत्व ऐसा व्यवहार करता है जैसे कि उसमें overflow: hidden संपत्ति सेट। इस संपत्ति के लिए समर्थन iOS 5, एंड्रॉइड 3.2 में लागू किया गया है।- आप डेवलपर्स के लिए ओपेरा वेबसाइट पर ओपेरा मिनी (जावास्क्रिप्ट सहित) की सीमाओं और सुविधाओं के बारे में पढ़ सकते हैं।
और उपयोगिताओं के बारे में कुछ शब्द जो मोबाइल सेवाओं को विकसित करते समय बहुत उपयोगी हो सकते हैं। मोबाइल सफारी में काम का परीक्षण करने के लिए, आपको एक iOS सिम्युलेटर की आवश्यकता होती है जो Xcode के साथ आता है। ओपेरा मोबाइल में काम का परीक्षण करने के लिए, संबंधित
एमुलेटर का उपयोग किया जाता है , जिसमें ओपेरा ड्रैगनफ्लू का उपयोग दूरस्थ डिबगिंग के लिए किया जा सकता है। ओपेरा मिनी के लिए एक ऑनलाइन
सिम्युलेटर है । इसके अलावा, मोबाइल उपकरणों पर डिबगिंग के लिए,
वेनरे रिमोट वेब इंस्पेक्टर (अपाचे कॉर्डोवा में प्रवेश किया), जो कि हाल ही में घोषित एडोब उत्पाद -
शैडो में भी उपयोग किया जाता है।
मैंने इस बारे में बात करने की कोशिश की कि हम अपनी सेवा कैसे बनाते हैं, जो लैपटॉप, स्मार्टफोन और टैबलेट, गेम कंसोल, इंटरनेट एक्सेस के साथ टीवी और यहां तक कि रेफ्रिजरेटर पर उपयोग करने के लिए सुविधाजनक है।
एंटोन Eprev,
फुतुबरा क्लाइंट साइड डेवलपर