วันเสาร์ที่ 17 ธันวาคม พ.ศ. 2554

Redirect เว็บไซต์สำหรับมือถือด้วย Apache mod_rewrite

ทุกวันนี้หลายเว็บคงจะมีเว็บสำหรับ Mobile เพื่อรองรับการเข้าชมของอุปกรณ์ประเภท Smart Phone และ Tablet ซึ่งหากท่านใช้ CMS ที่สามารถแปลงเว็บไซต์จากหน้าเว็บแบบเข้าชมจากเครื่อง PC ไปเป็น Mobile ได้ก็คงไม่เป็นปัญหาอะไรมากนัก แต่ถ้าไม่มีก็คงต้องหาวิธีเขียนโปรแกรมเพื่อตรวจสอบเว็บเบราเซอร์กันเอาเอง วันนี้ผมมีวิธีง่ายๆ ในการ Redirect เว็บไซต์ ให้ถูกต้องตามอุปกรณ์ที่เรียกใช้กันครับ วิธีง่ายๆ ที่ว่าก็คือการใช้ mod_rewrite นี่แหละครับ



มาทำความเข้าใจกันก่อน สมมุติว่าคุณมีเว็บไซต์ที่ให้บริการผู้เข้าชม 2 แบบ คือแบบปกติเข้าชมผ่านเครื่องคอมพิวเตอร์ และแบบ Mobile เข้าชมผ่าน Smart Phone/Tablet มีโดเมนดังต่อไปนี้




  • เว็บปกติ http://www.my-example.com

  • เว็บสำหรับ Mobile http://m.my-example.com



หากผู้เข้าชมเปิดด้วยเครื่องคอมพิวเตอร์ปกติให้ Apache redirect ไปยังเว็บปกติ หากเป็น Smart Phone ก็ redirect ไปยังหน้าเว็บสำหรับ Mobile เงือนไขมีประมาณนี้ครับ มาลงมือกันเลย



เริ่มจากหน้าเว็บปกติคือ www.my-example.com ให้เพิ่ม .htaccess ใน document root ของ virtual host นี้เพื่อสั่ง redirect หากเข้าชมผ่าน Mobile ให้ redirect ไปที่ m.my-example.com เขียน rewrite rules ได้ดังนี้



<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "android|blackberry|googlebot-mobile|iemobile|ipad|iphone|ipod|opera mobile|palmos|webos" [NC]
RewriteRule ^$ http://m.my-example.com/ [L,R=302]
</IfModule>



ในหน้าเว็บ Mobile คือ m.my-example.com ให้เพิ่ม .htaccess ใน document root ของ virtual host นี้เพื่อสั่ง redirect หากเข้าชมผ่านคอมพิวเตอร์ ให้ redirect ไปที่ www.my-example.com เขียน rewrite rules ได้ดังนี้



<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "!(android|blackberry|googlebot-mobile|iemobile|ipad|iphone|ipod|opera mobile|palmos|webos)" [NC]
RewriteRule ^$ http://www.example.com/ [L,R=302]
</IfModule>



เท่านี้ก็เรียบร้อยแล้ว :)


ไม่มีความคิดเห็น:

แสดงความคิดเห็น