Luôn đam mê, Nỗ lực hết mình

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

Hình ảnh tác giả

Cẩm Loan

Ngày đăng

Thứ ba - 27/03/2018

Lượt xem

5575


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.
 

Cẩm Loan

Hình ảnh tác giả

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.

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