Bir kullanıcının web sitemi mobil web tarayıcısından görüntüleyip görüntülemediğini nasıl tespit edebilirim, böylece web sitemin uygun sürümünü otomatik olarak algılayabilir ve görüntüleyebilirim?
Bir kullanıcının web sitemi mobil web tarayıcısından görüntüleyip görüntülemediğini nasıl tespit edebilirim, böylece web sitemin uygun sürümünü otomatik olarak algılayabilir ve görüntüleyebilirim?
Yanıtlar:
Evet, User-Agent başlığını okumak hile yapar.
Bazı vardır listeleri dışarı sıfırdan başlamak gerekmez yüzden orada bilinen mobil kullanıcı ajanların. Yapmak zorunda olduğum zaman, bilinen kullanıcı aracılarının bir veritabanını oluşturmak ve revizyon için tespit edildikçe bilinmeyenleri saklamak ve daha sonra manuel olarak ne olduklarını bulmaktır. Bu son şey bazı durumlarda aşırıya kaçabilir.
Apache düzeyinde yapmak istiyorsanız, düzenli olarak kullanıcı aracısını kontrol eden bir dizi yeniden yazma kuralı oluşturan bir komut dosyası oluşturabilirsiniz (veya yalnızca bir kez ve yeni kullanıcı aracılarını unutun veya ayda bir kez, durumunuza uygun olanı)
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1
örneğin, http: //domain/index.html isteklerini http: //domain/mobile/index.html adresine taşıyabilir.
Bir betiğin bir htaccess dosyasını periyodik olarak yeniden oluşturma yaklaşımından hoşlanmıyorsanız, Kullanıcı Aracısını kontrol eden bir modül yazabilirsiniz (daha önce yapılmış bir tane bulamadım, ancak bu özellikle uygun örneği buldum ) ve kullanıcı aracılarını edinin bazı sitelerden güncelleyin. O zaman yaklaşımı istediğiniz kadar karmaşıklaştırabilirsiniz, ancak bence sizin durumunuzda önceki yaklaşım iyi olacaktır.
Mobil Tarayıcı Algılama'da bunu Apache, ASP, ColdFusion, JavaScript ve PHP'de yapan açık kaynaklı komut dosyaları vardır .
Sadece bir düşünce ama bu sorunu ters yönden çalıştıysanız? Hangi tarayıcıların mobil olduğunu belirlemek yerine neden hangi tarayıcıların olmadığını belirlemiyorsunuz? Ardından sitenizi varsayılan olarak mobil sürüme kodlayın ve standart sürüme yönlendirin. Bir mobil tarayıcıya bakarken iki temel olasılık vardır. Ya javascript desteği var ya da yok. Dolayısıyla, tarayıcının javascript desteği yoksa, varsayılan olarak mobil sürüme ayarlanır. JavaScript desteği varsa, ekran boyutunu kontrol edin. Belirli bir boyutun altındaki herhangi bir şey muhtemelen bir mobil tarayıcı olacaktır. Daha büyük olan her şey standart düzeninize yönlendirilir. Ardından, JavaScript devre dışı bırakılmış kullanıcının mobil olup olmadığını belirlemeniz yeterlidir.
W3C'ye göre, JavaScript devre dışı bırakılmış kullanıcıların sayısı yaklaşık% 5'ti ve bu kullanıcıların çoğu kapattı, bu da bir tarayıcı ile ne yaptıklarını gerçekten bildiklerini ima ediyor. Kitlenizin büyük bir kısmı mı? Eğer değilse, onlar için endişelenmeyin. Eğer öyleyse, en kötü senaryo nedir? Sitenizin mobil sürümüne göz atan bu kullanıcılarınız var ve bu iyi bir şey.
JavaScript ile nasıl yaparım:
function isMobile() {
var index = navigator.appVersion.indexOf("Mobile");
return (index > -1);
}
Cep telefonlarında yazı tipi boyutunu üçe katladığı www.tablemaker.net/test/mobile.html adresindeki bir örneğe bakın .
En sevdiğim Mobil Tarayıcı Algılama mekanizması WURFL . Sık sık güncellenir ve her büyük programlama / dil platformuyla çalışır.
Css3 medya sorgularını kullanmayı düşündünüz mü? Çoğu durumda, sitenin ayrı bir mobil sürümünü oluşturmak zorunda kalmadan, özellikle hedeflenen cihaz için bazı css stilleri uygulayabilirsiniz.
@media screen and (max-width:1025px) {
#content {
width: 100%;
}
}
Genişliği istediğiniz gibi ayarlayabilirsiniz, ancak 1025 iPad yatay görünümünü yakalar.
Ayrıca, aşağıdaki meta etiketi kafanıza eklemek istersiniz:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Check out bu yazıyı bazı iyi örnekler için HTML5 Rocks üzerinde
için Android, iPhone, iPad, BlackBerry, Palm, Windows CE, Palm
<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>
Mobil Cihaz Tarayıcı Dosyası, ASP.NET projeleri için mobil (ve diğer) tarayıcıları tespit etmenin harika bir yoludur: http://mdbf.codeplex.com/
Mobil istemcileri kolayca tespit edebilir navigator.userAgent
ve algılanan istemci türüne göre alternatif komut dosyaları yükleyebilirsiniz:
$(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
}
});
User-Agent dizesini kontrol edebilirsiniz. JavaScript'te bu gerçekten kolaydır, bu sadece navigator nesnesinin bir özelliğidir.
var useragent = navigator.userAgent;
Cihazın JS'de iPhone veya Blackberry olup olmadığını kontrol edebilirsiniz.
var isIphone = !!agent.match(/iPhone/i),
isBlackberry = !!agent.match(/blackberry/i);
isIphone doğruysa siteye bir Iphone'dan erişiyorsunuz, isBlackBerry ise siteye bir Blackberry'den erişiyorsunuz.
Bunu test etmek için firefox için "UserAgent Switcher" eklentisini kullanabilirsiniz.
Eğer ilgileniyorsanız, burada https://github.com/sebarmeli/JS-Redirection-Mobile-Site burada barındırılan komut dosyası "redirection_mobile.js" kontrol etmek değer olabilir ve birinde daha fazla bilgi okuyabilirsiniz makalem burada:
Hangi dili kullandığınızı söylemediniz. Perl ise önemsiz:
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
}
Evet, kullanıcı tarayıcısı mobil tarayıcıları algılamak için kullanılır. Bunu kontrol etmek için birçok ücretsiz komut dosyası vardır. İşte mobil kullanıcıları farklı web sitelerine yönlendirmenize yardımcı olacak böyle bir php kodu .
Bu demosu senaryo ve örneklerle bir araya getirdim:
http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/
Bu örnek, kullanıcı aracısı algılaması için php işlevlerini kullanır ve kullanıcıların sitenin tarayıcı veya aygıt türlerine göre varsayılan olarak varsayılan olmayacak bir sürümü için bir tercih belirtmelerine izin vermenin ek avantajını sunar. Bu çerezlerle yapılır (javascript'in aksine sunucu tarafında php kullanılarak korunur).
Örnekler için makaledeki indirme bağlantısına baktığınızdan emin olun.
Beğeneceğinizi umuyoruz!
MobileESP'nin PHP, Java, APS.NET (C #), Ruby ve JavaScript kancaları vardır. ayrıca ticari kullanım için ücretsiz olan Apache 2 lisansına sahiptir. Benim için önemli olan şey, ekran boyutlarını ve diğer metrikleri değil, yalnızca tarayıcıları ve platformları tanımlamasıdır.
Zend Framework kullanarak yepyeni bir çözüm var. Zend_HTTP_UserAgent bağlantısından başlayın: