Điều hướng website cho thiết bị mobile theo nhiều cách bằng htaccess

Tuấn Nguyễn 1 y

1. Vì sao nên chuyển giao diện web sang giao diện mobile?
Bên cạnh việc chuyển dịch hành vi của người sử dụng từ laptop, PC sang các thiết bị nhỏ gọn như smartphone, máy tính bảng… có thể chỉ ra thêm 4 lý do chính:

Việc thiết kế giao diện web cho mobile đảm bảo hoàn thành các lệnh, các thao tác như trên web, đây là điều mà các web responsive không hoàn thành được tốt lắm. Lấy ví dụ đơn giản: bạn sở hữu một website bán hàng hoặc thương mại điện tử và các thao tác như đặt hàng, giỏ hàng, thanh toán…là điều bắt buộc. Tuy nhiên, so với các thiết kế giao diện web trên điện thoại, design web responsive lại không đảm bảo được những lệnh và hành động này.
Tối ưu cho tất cả các màn hình: thương mại điện tử ngày một phát triển, giai đoạn 2016-2020 đạt tốc độ tăng trưởng ổn định 30% mỗi năm. Theo thống kê hơn 50% số lượng giao dịch đều thực hiện thông qua điện thoại. Chính vì vậy thiết kế giao diện web cho mobile chính là “mảnh đất màu mỡ” để khai thác sàn thương mại này.
Tối ưu chuẩn SEO cho web để nâng cao thứ hạng xuất hiện trên các công cụ tìm kiếm: không phải tự nhiên mà ông lớn Google phát triển thuật toán Mobile Friendly. Dựa trên những số liệu nghiên cứu về sự chuyển dịch hành vi của người dùng, chuyển dịch sang sử dụng các thiết bị nhỏ gọn, tiện lợi như điện thoại thông minh, từ đó tạo ra thuật toán này.
Thể hiện tính chuyên nghiệp trong việc xây dựng thương hiệu doanh nghiệp: với một doanh nghiệp chuyên nghiệp, nhạy bén với xu hướng dịch chuyển của thị trường thì chỉ các web trên PC, laptop thôi là chưa đủ, hãy thiết kế giao diện web cho cả mobile.
Google luôn ưu tiên cho các website sử dụng được trên giao diện mobile
Google luôn ưu tiên cho các website sử dụng được trên giao diện mobile

2. Hướng dẫn cách chuyển giao diện web sang giao diện mobile
2.1. Sử dụng PHP (Apache server)
Đối với các trang web viết bằng ngôn ngữ PHP (đuôi file có dạng *.php) chúng ta sẽ nhúng thông tin cấu hình vào file .htaccess ở thư mục gốc nơi chứa mã nguồn của trang web
Chúng ta sẽ tiến hành chèn đoạn thông tin cấu hình vào ngay dòng đầu tiên của file .htaccess trong trường hợp file .htaccess đã có sẵn, nếu chưa có thì chúng ta cần tạo mới file .htaccess và bỏ thông tin cấu hình vào file vừa tạo
RewriteEngine On

RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP:Profile} !^$ [OR]
RewriteCond %{HTTP_USER_AGENT} "acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" [NC,OR]RewriteCond %{HTTP_USER_AGENT} "wapp|wapr|webc|winw|winw|xda|xda-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "up.browser|up.link|windowssce|iemobile|mini|mmp" [NC,OR]RewriteCond %{HTTP_USER_AGENT} "symbian|midp|wap|phone|pocket|mobile|pda|psp" [NC]
RewriteCond %{HTTP_USER_AGENT} !^.*ipad.*$ [NC]
RewriteCond %{HTTP_USER_AGENT} !^.*playbook.*$ [NC]RewriteCond %{HTTP_USER_AGENT} !^.*tablet.*$ [NC]
RewriteCond %{HTTP_USER_AGENT} !^.*kindle.*$ [NC]
RewriteCond %{HTTP_USER_AGENT} !^.*transformer.*$ [NC]
RewriteCond %{HTTP_USER_AGENT} !macintosh [NC]

RewriteRule ^ http://mobile-url/ [R,L]

PHP (Apache server) là một cách để chuyển giao diện từ web sang mobile
PHP (Apache server) là một cách để chuyển giao diện từ web sang mobile

2.2. Sử dụng ASP.NET
Đối với các trang web viết bằng ngôn ngữ ASP.NET (đuôi file có dạng *.aspx) chúng ta sẽ nhúng thông tin cấu hình vào file web.config
Để thực hiện chúng ta cần tìm đến file web.config nằm ở thư mục chứa mã nguồn của trang web, sau đó chèn đoạn thông tin cấu hình bên dưới vào.
Lưu ý rằng, ta cần chèn đoạn thông tin cấu hình vào cặp thẻ <system.webServer></system.webServer> Cần kiểm tra xem trong cặp thẻ đó có tồn tại thẻ <rewrite> và <rules> hay chưa
Nếu chưa có 2 thẻ này, thì ta chỉ việc chèn đoạn thông tin cấu hình vào ngay phía sau thẻ <system.webServer>
<rewrite> <rules> <rule name="Tablet Device" patternSyntax="ECMAScript" stopProcessing="true"> <match url=".*" ignoreCase="true" negate="false" /> <conditions logicalGrouping="MatchAny" trackAllCaptures="false"> <add input="{HTTP_USER_AGENT}" pattern="ipad|playbook|tablet|kindle|transformer" /> </conditions> <action type="None" /> </rule> <rule name="Mobile Device" patternSyntax="ECMAScript" stopProcessing="true"> <match url=".*" ignoreCase="true" negate="false" /> <conditions logicalGrouping="MatchAny" trackAllCaptures="false"> <add input="{HTTP_USER_AGENT}" pattern="acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" /> <add input="{HTTP_USER_AGENT}" pattern="dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" /> <add input="{HTTP_USER_AGENT}" pattern="maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" /> <add input="{HTTP_USER_AGENT}" pattern="palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" /> <add input="{HTTP_USER_AGENT}" pattern="sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" /> <add input="{HTTP_USER_AGENT}" pattern="teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" /> <add input="{HTTP_USER_AGENT}" pattern="wapp|wapr|webc|winw|winw|xda|xda-" /> <add input="{HTTP_USER_AGENT}" pattern="up.browser|up.link|windowssce|iemobile|mini|mmp" /> <add input="{HTTP_USER_AGENT}" pattern="symbian|midp|wap|phone|pocket|mobile|pda|psp" /> </conditions>

<!--Change your mobile website link here--> <action type="Redirect" url="http://mobile-url/ " appendQueryString="false" redirectType="Found" /> </rule> </rules> </rewrite>

Đối với trường hợp đã có sẵn thẻ <rewrite> và <rules> thì ta chỉ cần chèn đoạn thông tin cấu hình bên dưới vào ngay phía sao thẻ <rules>
<rule name="Tablet Device" patternSyntax="ECMAScript" stopProcessing="true"> <match url=".*" ignoreCase="true" negate="false" /> <conditions logicalGrouping="MatchAny" trackAllCaptures="false"> <add input="{HTTP_USER_AGENT}" pattern="ipad|playbook|tablet|kindle|transformer" /> </conditions> <action type="None" /> </rule> <rule name="Mobile Device" patternSyntax="ECMAScript" stopProcessing="true"> <match url=".*" ignoreCase="true" negate="false" /> <conditions logicalGrouping="MatchAny" trackAllCaptures="false"> <add input="{HTTP_USER_AGENT}" pattern="acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" /> <add input="{HTTP_USER_AGENT}" pattern="dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" /> <add input="{HTTP_USER_AGENT}" pattern="maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" /> <add input="{HTTP_USER_AGENT}" pattern="palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" /> <add input="{HTTP_USER_AGENT}" pattern="sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" /> <add input="{HTTP_USER_AGENT}" pattern="teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" /> <add input="{HTTP_USER_AGENT}" pattern="wapp|wapr|webc|winw|winw|xda|xda-" /> <add input="{HTTP_USER_AGENT}" pattern="up.browser|up.link|windowssce|iemobile|mini|mmp" /> <add input="{HTTP_USER_AGENT}" pattern="symbian|midp|wap|phone|pocket|mobile|pda|psp" /> </conditions>

<!--Change your mobile website link here--> <action type="Redirect" url="http://mobile-url/ " appendQueryString="false" redirectType="Found" /> </rule>

2.3. Sử dụng javacript
Trong trường hợp bạn không muốn sử dụng 2 cái ở trên thì vẫn có thể sử dụng cách chuyển giao diện web sang giao diện mobile.

<script type="text/javascript"> <!-- if (screen.width <= 699) { window.location = 'http://mobile-url/ '; } //--></script><script type="text/javascript"> <!-- (function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://mobile-url/ '); //--></script>