Tư vấn thiết kế website

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/ Uncategorized

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

TIN LIÊN QUAN

Những lưu ý cần quan tâm khi thiết kế website tin tức

Những lưu ý cần quan tâm khi thiết kế website tin tức

Website tin tức là một mô hình website đang được phổ biến ở trên mạng internet hiện nay. Với ưu điểm là...

bởi Vidoco, T03 26, 2018 / Danh mục
Cách thiết kế giao diện web đẹp và miễn phí - VIDOCO

Cách thiết kế giao diện web đẹp và miễn phí - VIDOCO

Thiết kế giao diện web được xem là quan trọng nhất trong việc thiết kế web. Do đó, chúng tôi sẽ chia sẻ...

bởi Vidoco, T03 30, 2018 / Danh mục
Cách bố cục các trang thiết kế web đẹp nhất Việt Nam

Cách bố cục các trang thiết kế web đẹp nhất Việt Nam

Thiết kế web đẹp sẽ tạo được ấn tượng đối với khách hàng từ cái nhìn đầu tiên. Do đó, bạn nên tham...

bởi Vidoco, T03 30, 2018 / Danh mục
Cách cài đặt id theo dõi thuộc tính trên google analytics

Cách cài đặt id theo dõi thuộc tính trên google analytics

Cài đặt google analytics chưa bao giờ thiếu trong các website và blog.

bởi Vidoco, T03 26, 2018 / Danh mục
Tự học thiết kế website chuyên nghiệp làm sao cho hiệu quả nhất

Tự học thiết kế website chuyên nghiệp làm sao cho hiệu quả nhất

Thiết kế Website là ngành mà hiện nay đang thiếu nguồn nhân lực, trong khi sinh viên mới ra trường lại không đáp ứng...

bởi Vidoco, T03 26, 2018 / Danh mục
Dịch vụ SEO Phú Yên - Lên top nhanh và hiệu quả

Dịch vụ SEO Phú Yên - Lên top nhanh và hiệu quả

Dịch vụ SEO Phú Yên mang đến cho khách hàng tại Phú Yên và các tỉnh miền Đông Nam Bộ được lên top google các từ khóa...

bởi Vidoco, T03 23, 2018 / Danh mục