ตรวจจับเบราว์เซอร์มือถือโดยอัตโนมัติ (ผ่าน user-agent?) [ปิด]

ฉันจะตรวจสอบได้อย่างไรว่าผู้ใช้กำลังดูเว็บไซต์ของฉันจากเว็บเบราว์เซอร์มือถือเพื่อที่ฉันจะสามารถตรวจจับและแสดงเว็บไซต์ในรุ่นที่เหมาะสมได้โดยอัตโนมัติ

ใช่การอ่านส่วนหัวของ User-Agent นั้นจะเป็นการหลอกลวง

มีรายการ บางส่วนจากตัวแทนผู้ใช้มือถือที่รู้จักดังนั้นคุณไม่จำเป็นต้องเริ่มจากศูนย์ สิ่งที่ฉันทำเมื่อฉันต้องทำคือการสร้างฐานข้อมูลของตัวแทนผู้ใช้ที่รู้จักและเก็บข้อมูลที่ไม่รู้จักเนื่องจากพวกเขาถูกตรวจพบเพื่อการแก้ไขและจากนั้นคิดด้วยตนเองว่าเป็นอะไร สิ่งสุดท้ายนี้อาจ overkill ในบางกรณี

หากคุณต้องการที่จะทำในระดับ Apache คุณสามารถสร้างสคริปต์ที่สร้างชุดของกฎการเขียนซ้ำการตรวจสอบตัวแทนผู้ใช้ (หรือเพียงแค่ครั้งเดียวและลืมเกี่ยวกับตัวแทนผู้ใช้ใหม่หรือเดือนละครั้งสิ่งที่เหมาะกับกรณีของคุณ) เช่น

RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1

ซึ่งจะย้ายตัวอย่างเช่นคำขอไปยังhttp: //domain/index.htmlไปที่ http: //domain/mobile/index.html

หากคุณไม่ชอบวิธีการสร้างสคริปต์สร้างไฟล์ htaccess เป็นระยะคุณสามารถเขียนโมดูลที่ตรวจสอบตัวแทนผู้ใช้ (ฉันไม่พบที่ทำไว้แล้ว แต่พบตัวอย่างที่เหมาะสมโดยเฉพาะ) และรับตัวแทนผู้ใช้ จากบางไซต์เพื่ออัปเดต จากนั้นคุณสามารถสร้างความซับซ้อนให้มากที่สุดเท่าที่คุณต้องการ แต่ฉันคิดว่าในกรณีของคุณวิธีการก่อนหน้านี้น่าจะดี

มีสคริปต์โอเพนซอร์สในDetect Mobile Browserที่ทำเช่นนี้ใน Apache, ASP, ColdFusion, JavaScript และ PHP

แค่คิด แต่จะทำอย่างไรถ้าคุณแก้ไขปัญหานี้จากทิศทางตรงกันข้าม แทนที่จะพิจารณาว่าเบราว์เซอร์ใดเป็นอุปกรณ์เคลื่อนที่ทำไมถึงไม่ตัดสินว่าเบราว์เซอร์ใดไม่ใช่ จากนั้นให้รหัสไซต์ของคุณเป็นค่าเริ่มต้นเป็นเวอร์ชันมือถือและเปลี่ยนเส้นทางไปเป็นเวอร์ชันมาตรฐาน มีความเป็นไปได้สองอย่างพื้นฐานเมื่อดูที่เบราว์เซอร์มือถือ อาจรองรับ javascript หรือไม่ก็ได้ ดังนั้นหากเบราว์เซอร์ไม่มีการสนับสนุนจาวาสคริปต์ก็จะเริ่มต้นเป็นรุ่นมือถือ หากรองรับ JavaScript ให้ตรวจสอบขนาดหน้าจอ อะไรก็ตามที่มีขนาดเล็กกว่าจะเป็นเบราว์เซอร์มือถือ อะไรที่ใหญ่กว่านั้นจะถูกนำไปยังเค้าโครงมาตรฐานของคุณ จากนั้นสิ่งที่คุณต้องทำคือตรวจสอบว่าผู้ใช้ที่ปิดใช้งาน JavaScript นั้นเป็นมือถือหรือไม่
ตาม W3C จำนวนผู้ใช้ที่ปิดการใช้งาน JavaScript อยู่ที่ประมาณ 5% และผู้ใช้ส่วนใหญ่ปิดใช้งานซึ่งหมายความว่าพวกเขารู้ว่าพวกเขากำลังทำอะไรกับเบราว์เซอร์จริง พวกเขาเป็นส่วนใหญ่ของผู้ชมของคุณ? ถ้าไม่ก็ไม่ต้องกังวลกับพวกเขา ถ้าเป็นเช่นนั้นสถานการณ์กรณีที่เลวร้ายที่สุดคืออะไร? คุณมีผู้ใช้ที่เรียกดูเว็บไซต์เวอร์ชันมือถือของคุณและนั่นเป็นสิ่งที่ดี

นี่คือวิธีที่ฉันทำใน JavaScript:

function isMobile() {
  var index = navigator.appVersion.indexOf("Mobile");
  return (index > -1);
}

ดูตัวอย่างได้ที่www.tablemaker.net/test/mobile.htmlซึ่งมีขนาดตัวอักษรสามเท่าบนโทรศัพท์มือถือ

กลไกการตรวจสอบที่ชื่นชอบเบราว์เซอร์มือถือเป็นWURFL อัปเดตบ่อยครั้งและทำงานได้กับแพลตฟอร์มการเขียนโปรแกรม / ภาษาที่สำคัญทุกแห่ง

คุณได้พิจารณาใช้คำสั่งสื่อ css3 หรือไม่ ในกรณีส่วนใหญ่คุณสามารถใช้สไตล์ css บางอย่างโดยเฉพาะสำหรับอุปกรณ์เป้าหมายโดยไม่ต้องสร้างรุ่นมือถือแยกต่างหากของไซต์

@media screen and (max-width:1025px) {
   #content {
     width: 100%;
   }
}

คุณสามารถตั้งค่าความกว้างเป็นสิ่งที่คุณต้องการ แต่ 1,025 จะจับมุมมองแนวนอนของ iPad

คุณจะต้องเพิ่มเมตาแท็กต่อไปนี้ในหัวของคุณ:

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

ลองดูบทความนี้ที่ HTML5 Rocks เพื่อเป็นตัวอย่างที่ดี

สำหรับ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>

ไฟล์เบราว์เซอร์อุปกรณ์พกพาเป็นวิธีที่ยอดเยี่ยมในการตรวจจับ broswers มือถือ (และอื่น ๆ ) สำหรับโครงการ 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;

คุณสามารถตรวจสอบว่าอุปกรณ์ถ้า iPhone หรือ Blackberry ใน JS กับสิ่งที่ชอบ

var isIphone = !!agent.match(/iPhone/i),
    isBlackberry = !!agent.match(/blackberry/i);

ถ้า isPhone เป็นจริงคุณกำลังเข้าใช้งานเว็บไซต์จาก Iphone หาก isBlackBerry คุณกำลังเข้าใช้งานเว็บไซต์จาก Blackberry

คุณสามารถใช้ปลั๊กอิน "UserAgent Switcher" สำหรับ firefox เพื่อทดสอบว่า

หากคุณสนใจก็อาจจะคุ้มค่าที่จะตรวจสอบสคริปต์"redirection_mobile.js"ของฉันที่โฮสต์บน github ที่นี่https://github.com/sebarmeli/JS-Redirection-Mobile-Siteและคุณสามารถอ่านรายละเอียดเพิ่มเติมได้จาก บทความของฉันที่นี่:

http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/

protected void Page_Load(object sender, EventArgs e)
{
    if (Request.Browser.IsMobileDevice == true)
    {
        Response.Redirect("Mobile//home.aspx");
    }
}

ตัวอย่างนี้ทำงานใน asp.net

คุณยังไม่ได้พูดภาษาที่คุณใช้ ถ้ามันเป็น Perl แล้วมันเป็นเรื่องเล็กน้อย:

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 บนฝั่งเซิร์ฟเวอร์ซึ่งตรงข้ามกับจาวาสคริปต์)

อย่าลืมดูลิงค์ดาวน์โหลดในบทความเพื่อดูตัวอย่าง

หวังว่าคุณจะสนุก!

MobileESPมี PHP, Java, APS.NET (C #), Ruby และ JavaScript hooks มันมีสิทธิ์การใช้งาน Apache 2 ด้วยเช่นกันดังนั้นฟรีสำหรับใช้ในเชิงพาณิชย์ สิ่งสำคัญสำหรับฉันคือมันระบุเฉพาะเบราว์เซอร์และแพลตฟอร์มที่ไม่ใช่ขนาดหน้าจอและตัวชี้วัดอื่น ๆ ซึ่งทำให้มันมีขนาดเล็ก

มีโซลูชันใหม่ล่าสุดที่ใช้ Zend Framework เริ่มจากลิงก์ไปที่ Zend_HTTP_UserAgent:

http://framework.zend.com/manual/en/zend.http.html