• 592A Cộng Hòa, Tân Bình, Hồ Chí Minh
  • cskh@vidoco.vn

Hướng dẫn cách chuyển hướng giao diện web sang giao diện mobile

  • Cẩm Loan
  • Thứ hai - 26/03/2018 22:30
  • 5920
Kích thước của giao diện web ở trên máy tính và mobile là khác nhau nếu bạn không thiết kế web phù hợp với mobile. Do đó, Vidoco chúng tôi sẽ hướng dẫn cách chuyển hướng giao diện web sang giao diện mobile.

Thiết kế website không chỉ riêng thiết kế trang web phù hợp với máy tính mà nó còn cần phù hợp với những thiết bị khác như máy tính bàn, điện thoại di động, mobile,… Trong đó quan trọng nhất là chuyển hướng giao diện web sang giao diện mobile. Và bài viết hôm nay chúng tôi sẽ hướng dẫn bạn làm điều đó.
 

Hướng dẫn cách chuyển hướng giao diện web sang giao diện mobile
 

Sử dụng PHP (Apache server)


Đối với các trang web được viết bằng ngôn ngữ PHP thì chúng ta sẽ nhúng thông tin cấu hình vào file.htaccess nằm ở thư mục gốc chứa mã nguồn của trang web.

Chúng ta có thể tiến hành chèn đoạn thông tin chuyển giao diện web sang giao diện mobile vào dòng đầu tiên của file.htaccess trong trường hợp file.htaccess đã có sẵn. Trong trường hợp bạn chưa có file này thì hãy tạo rồi bỏ thông tin chuyển giao diện web sang giao diện mobile vào.
 
RewriteEngine OnRewriteCond %{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]

 

Sử dụng ASP.NET


Đối với các trang web được viết bằng ngôn ngữ ASP.NET chúng ta sẽ nhúng thông tin chuyển giao diện web sang giao diện mobile vào file web.cofig.

Sau khi tìm đến file web.cofig thì bạn sẽ chèn đoạn thông tin này vào <system.webServer></system.webServer> và kiểm tra cặp thẻ này đã có thẻ <rewrite> và <rules> hay chưa
Trong trường hợp chưa có 2 thẻ này thì bạn chỉ cần chèn thông tin chuyển giao diện web sang giao diện mobile 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ó thẻ <rewrite> và <rules> rồi thì chỉ cần chèn đoạn thông tin cấu hình vào phía sau 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>

 

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 hướng 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>

Với 3 cách mà chúng tôi nói trên, chắc chắn bạn có thể chuyển hướng giao diện web sang giao diện mobile. Cảm ơn các bạn đã đọc viết hướng dẫn cách chuyển hướng giao diện web sang giao diện mobile. Chúc các bạn thành công.
 

Tác giả: Cẩm Loan

Bạn có thể đăng lại bài viết trên ở website hoặc các phương tiện truyền thông khác.  Nhưng vui lòng ghi rõ nguồn https://vidoco.vn để ủng hộ chúng tôi. Nếu có nhu cầu tư vấn thiết kế website xin liên hệ 028 73 027 720. Xin cảm ơn.

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Mã bảo mật   
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây