Cách chuyển giao diện web sang giao diện mobile

Theo báo cáo của Vietnam Digital Advertising 2019, ước tính tại Việt Nam số lượng người truy cập internet qua thiết bị điện thoại di động thông minh là 59,8% và có xu hướng gia tăng. Như vậy có thể thấy việc chuyển giao diện web sang giao diện mobile là xu hướng chung hiện nay.

Làm sao chuyển giao diện web sang giao diện mobile?

 Làm sao chuyển giao diện web sang giao diện mobile?

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:

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)

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

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

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

Có 3 cách chuyển giao diện web sang giao diện mobile. Người dùng có thể lựa chọn phương pháp phù hợp nhất với mình

Có 3 cách chuyển giao diện web sang giao diện mobile. Người dùng có thể lựa chọn phương pháp phù hợp nhất với mình

Với 3 cách mà chúng tôi nói trên, chắc chắn bạn có thể chuyển giao diện web sang giao diện mobile. Để có thể cập nhật nhiều bài viết mới về các hướng dẫn thiết kế web mobile, hãy đón đọc các bài viết khác của Letweb bạn nhé!

Xem thêm:

Letweb – Đơn vị thiết kế website cao cấp chuyên nghiệp, sẽ mang đến những thành phẩm tối ưu về nội dung lẫn giao diện. Nếu đó là điều bạn cần, hãy kết nối ngay với chúng tôi để được tư vấn miễn phí từ A đến Z! 

Thông tin chi tiết liên hệ:

Kim Ngân

Thông tin bài viết
Ngày đăng: Tháng Chín 11, 2020
Tác giả
hatran
Các chuyên mục khác

Liên hệ Letweb​

Khi bạn muốn yêu cầu dịch vụ, góp ý, thắc mắc về dự án thiết kế website của bạn, xin đừng ngại liên hệ với Letweb bằng form này hoặc:

CÔNG TY TNHH PHẦN MỀM VÀ TRUYỀN THÔNG VÂN TAY

Park 7, Vinhomes Central Park, Số 208 Nguyễn Hữu Cảnh, P.22, Q. Bình Thạnh

Điện thoại: 0919 1000 75 (Ms. Yến) – 028 3 636 3185 (Số máy bàn)

Email: thietkeweb@letweb.net (Tiếng Việt), hello@letweb.net (English)

 
 
Họ tên / Your name*
Số điện thoại / Phone*
Email*
Lời nhắn / Message

©2014 - 2021 Letweb. Một sản phẩm được xây dựng bằng chuyên môn và đam mê của Vân Tay Media.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
DMCA.com Protection Status
Họ tên / Your name*
Số điện thoại / Phone*
Email*
Lời nhắn / Message

Nghiên cứu thị hiếu

Phân tích điểm mạnh, yếu trên website các đối thủ về mặt giao diện, SEO, chức năng, tốc độ trên cơ sở các nghiên cứu về trải nghiệm người dùng.

NHẬN EBOOK MIỄN PHÍ

Logo Letweb-blue 500x117 1