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

Thứ hai - 26/03/2018 22:30
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 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]

 

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ổ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

CHO CHÚNG TÔI BIẾT YÊU CẦU CỦA BẠN

VIDOCO & SỨ MỆNH

Được thành lập chính thức vào tháng 7 năm 2017 và có trụ sở tại Hồ Chí Minh. Sứ mệnh của chúng tôi là cung cấp các giải pháp kinh doanh trực tuyến thiết thực cho khách hàng dựa trên đội ngũ nhân sự chuyên nghiệp, không ngừng học hỏi và sáng tạo.
Vidoco cũng là một doanh nghiệp có trách nhiệm xã hội cung cấp các cơ hội đào tạo và việc làm cho những người có hoàn cảnh khó khăn ở Việt Nam. Chúng tôi luôn dành hơn 51% lợi nhuận của mình để phục vụ cộng đồng người yếu thế.

 

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