यदि कोई उपयोगकर्ता मेरी वेब साइट को मोबाइल वेब ब्राउज़र से देख रहा है तो मैं कैसे पता लगा सकता हूं ताकि मैं तब अपनी वेब साइट के उपयुक्त संस्करण का पता लगा सकूं और प्रदर्शित कर सकूं?
यदि कोई उपयोगकर्ता मेरी वेब साइट को मोबाइल वेब ब्राउज़र से देख रहा है तो मैं कैसे पता लगा सकता हूं ताकि मैं तब अपनी वेब साइट के उपयुक्त संस्करण का पता लगा सकूं और प्रदर्शित कर सकूं?
जवाबों:
हां, यूजर-एजेंट हेडर को पढ़कर ट्रिक करेगा।
कुछ कर रहे हैं सूचियों बाहर तो आप स्क्रैच से शुरू करने के लिए की जरूरत नहीं है जाना जाता है मोबाइल उपयोगकर्ता एजेंटों के वहाँ। जब मैंने किया था तो मुझे ज्ञात उपयोगकर्ता एजेंटों का एक डेटाबेस बनाना था और अज्ञात को संग्रहीत करना था क्योंकि वे संशोधन के लिए पहचाने जाते हैं और फिर मैन्युअल रूप से यह पता लगाते हैं कि वे क्या हैं। यह आखिरी बात कुछ मामलों में अधिक हो सकती है।
यदि आप इसे अपाचे स्तर पर करना चाहते हैं, तो आप एक स्क्रिप्ट बना सकते हैं जो समय-समय पर उपयोगकर्ता एजेंट की जाँच करने वाले नियमों को सेट करती है (या बस एक बार और नए उपयोगकर्ता एजेंटों के बारे में भूल जाती है, या महीने में एक बार, जो भी आपके मामले के अनुरूप है), जैसे
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1
जो, उदाहरण के लिए, http: //domain/index.html से http: //domain/mobile/index.html पर जाएगा।
यदि आपको समय-समय पर एक स्क्रिप्ट को htaccess फ़ाइल को फिर से बनाने का दृष्टिकोण पसंद नहीं है, तो आप एक मॉड्यूल लिख सकते हैं जो उपयोगकर्ता एजेंट की जांच करता है (मुझे पहले से बना कोई नहीं मिला, लेकिन यह विशेष रूप से उपयुक्त उदाहरण मिला ) और उपयोगकर्ता एजेंट प्राप्त करें कुछ साइटों से उन्हें अद्यतन करने के लिए। तब आप दृष्टिकोण को जितना चाहें उतना जटिल कर सकते हैं, लेकिन मुझे लगता है कि आपके मामले में पिछला दृष्टिकोण ठीक होगा।
डिटेक्ट मोबाइल ब्राउज़र पर ओपन सोर्स स्क्रिप्ट हैं जो अपाचे, एएसपी, कोल्डफ्यूजन, जावास्क्रिप्ट और पीएचपी में ऐसा करते हैं।
बस एक विचार लेकिन क्या होगा अगर आपने इस समस्या को विपरीत दिशा से काम किया हो? यह निर्धारित करने के बजाय कि कौन से ब्राउज़र मोबाइल हैं, यह निर्धारित क्यों नहीं किया जाता है कि कौन से ब्राउज़र नहीं हैं? फिर अपनी साइट को मोबाइल संस्करण में डिफ़ॉल्ट करने के लिए कोड करें और मानक संस्करण पर रीडायरेक्ट करें। मोबाइल ब्राउज़र को देखते समय दो बुनियादी संभावनाएँ हैं। या तो इसके पास जावास्क्रिप्ट समर्थन है या यह नहीं है। इसलिए यदि ब्राउज़र में जावास्क्रिप्ट समर्थन नहीं है तो यह मोबाइल संस्करण के लिए डिफ़ॉल्ट होगा। यदि इसमें जावास्क्रिप्ट समर्थन है, तो स्क्रीन का आकार जांचें। एक निश्चित आकार के नीचे कुछ भी संभवतः एक मोबाइल ब्राउज़र होगा। कुछ भी बड़ा आपके मानक लेआउट में पुनर्निर्देशित हो जाएगा। फिर आपको यह निर्धारित करने की आवश्यकता है कि जावास्क्रिप्ट अक्षम उपयोगकर्ता मोबाइल है या नहीं।
W3C के अनुसार जावास्क्रिप्ट अक्षम के साथ उपयोगकर्ताओं की संख्या लगभग 5% थी और उन उपयोगकर्ताओं में से अधिकांश ने इसे बंद कर दिया है जिसका अर्थ है कि वे वास्तव में जानते हैं कि वे एक ब्राउज़र के साथ क्या कर रहे हैं। क्या वे आपके दर्शकों का एक बड़ा हिस्सा हैं? यदि नहीं, तो उनके बारे में चिंता मत करो। यदि हां, तो सबसे खराब स्थिति क्या है? आपके पास वे उपयोगकर्ता हैं जो आपकी साइट के मोबाइल संस्करण को ब्राउज़ कर रहे हैं, और यह एक अच्छी बात है।
यहाँ मैं इसे जावास्क्रिप्ट में कैसे करूँ:
function isMobile() {
var index = navigator.appVersion.indexOf("Mobile");
return (index > -1);
}
Www.tablemaker.net/test/mobile.html पर एक उदाहरण देखें जहां यह मोबाइल फोन पर फ़ॉन्ट आकार को बढ़ाता है ।
मेरा पसंदीदा मोबाइल ब्राउज़र डिटेक्शन तंत्र WURFL है । यह अक्सर अद्यतन किया जाता है और यह हर प्रमुख प्रोग्रामिंग / भाषा मंच के साथ काम करता है।
क्या आपने css3 मीडिया प्रश्नों का उपयोग करने पर विचार किया है? ज्यादातर मामलों में आप साइट के एक अलग मोबाइल संस्करण को बनाने के लिए बिना लक्षित डिवाइस के लिए कुछ सीएसएस शैलियों को लागू कर सकते हैं।
@media screen and (max-width:1025px) {
#content {
width: 100%;
}
}
आप जो भी चाहते हैं, उसकी चौड़ाई निर्धारित कर सकते हैं, लेकिन 1025 आईपैड लैंडस्केप दृश्य को पकड़ लेंगे।
आप निम्नलिखित मेटा टैग को अपने सिर से जोड़ना चाहेंगे:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
की जाँच करें इस लेख कुछ अच्छे उदाहरण के लिए HTML5 Rocks में अधिक
के लिए एंड्रॉयड, IPHONE, आईपैड, ब्लैकबेरी, पाम, Windows CE, पाम
<script language="javascript"> <!--
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
alert("MOBILE DEVICE DETECTED");
document.write("<b>------------------------------------------<br>")
document.write("<b>" + navigator.userAgent + "<br>")
document.write("<b>------------------------------------------<br>")
var userAgent = navigator.userAgent.toLowerCase();
if ((userAgent.search("android") > -1) && (userAgent.search("mobile") > -1))
document.write("<b> ANDROID MOBILE <br>")
else if ((userAgent.search("android") > -1) && !(userAgent.search("mobile") > -1))
document.write("<b> ANDROID TABLET <br>")
else if ((userAgent.search("blackberry") > -1))
document.write("<b> BLACKBERRY DEVICE <br>")
else if ((userAgent.search("iphone") > -1))
document.write("<b> IPHONE DEVICE <br>")
else if ((userAgent.search("ipod") > -1))
document.write("<b> IPOD DEVICE <br>")
else if ((userAgent.search("ipad") > -1))
document.write("<b> IPAD DEVICE <br>")
else
document.write("<b> UNKNOWN DEVICE <br>")
}
else
alert("NO MOBILE DEVICE DETECTED"); //--> </script>
मोबाइल डिवाइस ब्राउज़र फ़ाइल ASP.NET प्रोजेक्ट्स के लिए मोबाइल (और अन्य) ब्रॉवर्स का पता लगाने का एक शानदार तरीका है: http://mdbf.codeplex.com/
आप मोबाइल क्लाइंट का पता लगा सकते हैं navigator.userAgent
, और वैकल्पिक क्लाइंट स्क्रिप्ट का पता लगा सकते हैं जैसे कि:
$(document).ready(function(e) {
if(navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)) {
//write code for your mobile clients here.
var jsScript = document.createElement("script");
jsScript.setAttribute("type", "text/javascript");
jsScript.setAttribute("src", "js/alternate_js_file.js");
document.getElementsByTagName("head")[0].appendChild(jsScript );
var cssScript = document.createElement("link");
cssScript.setAttribute("rel", "stylesheet");
cssScript.setAttribute("type", "text/css");
cssScript.setAttribute("href", "css/alternate_css_file.css");
document.getElementsByTagName("head")[0].appendChild(cssScript);
}
else{
// write code for your desktop clients here
}
});
आप उपयोगकर्ता-एजेंट स्ट्रिंग की जांच कर सकते हैं। जावास्क्रिप्ट में, यह वास्तव में आसान है, यह सिर्फ नाविक वस्तु का एक गुण है।
var useragent = navigator.userAgent;
आप जांच सकते हैं कि क्या डिवाइस जेएस या आईफोन में जेएस जैसी किसी चीज के साथ है
var isIphone = !!agent.match(/iPhone/i),
isBlackberry = !!agent.match(/blackberry/i);
अगर आईफोन सच है, तो आप एक आईफोन से साइट को एक्सेस कर रहे हैं, अगर आइलैकबैरीबेरी आप एक ब्लैकबेरी से साइट को एक्सेस कर रहे हैं।
आप परीक्षण करने के लिए फ़ायरफ़ॉक्स के लिए "UserAgent Switcher" प्लगइन का उपयोग कर सकते हैं।
यदि आप भी रुचि रखते हैं, तो यह मेरी स्क्रिप्ट "redirection_mobile.js" की जाँच करने के लायक हो सकता है यहाँ ggub पर होस्ट किया गया है https://github.com/sebarmeli/JS-Redirection-Mobile-Site और आप एक में अधिक विवरण पढ़ सकते हैं मेरा लेख यहाँ:
आपने यह नहीं कहा कि आप किस भाषा का उपयोग कर रहे हैं। यदि यह पर्ल है तो यह तुच्छ है:
use CGI::Info;
my $info = CGI::Info->new();
if($info->is_mobile()) {
# Add mobile stuff
}
unless($info->is_mobile()) {
# Don't do some things on a mobile
}
हां ब्राउज़र-एजेंट का उपयोग मोबाइल ब्राउज़रों का पता लगाने के लिए किया जाता है। इसे जांचने के लिए बहुत सारी मुफ्त स्क्रिप्ट उपलब्ध हैं। यहां एक ऐसा php कोड है, जो आपको मोबाइल उपयोगकर्ताओं को विभिन्न वेबसाइट पर पुनर्निर्देशित करने में मदद करेगा।
मैंने इस डेमो को स्क्रिप्ट और उदाहरणों के साथ रखा:
http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/
यह उदाहरण उपयोगकर्ता एजेंट का पता लगाने के लिए php फ़ंक्शन का उपयोग करता है और उपयोगकर्ताओं को साइट के एक संस्करण के लिए वरीयता देने के लिए उपयोगकर्ताओं को अनुमति देने का अतिरिक्त लाभ प्रदान करता है जो आमतौर पर उनके ब्राउज़र या डिवाइस प्रकार के आधार पर डिफ़ॉल्ट नहीं होगा। यह कुकीज़ के साथ किया जाता है (जावास्क्रिप्ट के विपरीत सर्वर-साइड पर php का उपयोग करके बनाए रखा जाता है।)
उदाहरणों के लिए लेख में डाउनलोड लिंक देखें।
उम्मीद करता हु आपको आनंद मिला हो!
Zend फ्रेमवर्क का उपयोग कर एक नया समाधान है। Zend_HTTP_UserAgent के लिंक से शुरू करें: