Home > Web Front-end > JS Tutorial > How does js determine whether the user is accessing on PC or mobile terminal_javascript skills

How does js determine whether the user is accessing on PC or mobile terminal_javascript skills

WBOY
Release: 2016-05-16 16:51:11
Original
1394 people have browsed it

Recently we have been busy with our team's project "Coffee Wings", in which we provide an excellent experience for mobile platforms. With the booming development of the Android platform. Not only has it driven the domestic smartphone industry, but many domestic developers have also begun to join the wave of Android mobile terminals. If there are many big Internet waves you missed. Then you absolutely can’t miss this Android wave. At present, we have developed mobile terminals and Android clients for "Wings of Coffee". If you use a mobile phone with Android or IOS operating system, you can directly visit the domain name www.sygxy.cn to view the mobile terminal effects. At the same time, the Android client has been put on application malls such as Tencent’s “App Store” and “Baidu Mobile Assistant”. You can directly search for "Coffee Wings" to download. Without any promotion, it has only been on the shelves for a week and has already received more than 100 downloads.

If you need to optimize the mobile terminal, what you must do is to determine what the client's access device is. Based on the judgment results, the unresolved domain name address is returned, and then different CSS files are loaded.

The judgment method we use is based on the user-agent value. Use the userAgent property of the Navigator object in the javascript framework. There is no public standard for the navigator object, but it is supported by all browsers on the market. Use the userAgent attribute to return the value of the user-agent header sent by the client to the server. There is a User-Agent in the header information. Its function is to tell the server what browser the user's client is and the operating system information. Use regular expressions to obtain the user-agent value. It is judged against the local value. This matching value can be a mobile operating system such as Android, ios, or the name of the browser. If there is a match, it will jump. Otherwise, it will not jump and go directly to the PC homepage.

For specific code implementation, in order to improve the portability of the website, we use JavaScript scripting language. In the author’s opinion, there are two benefits of using this technology

1: It can improve the portability of the website. If in future web projects, our team needs to add the effect of mobile terminals again, it can be easily Easily introduce this part of the JS code and make a judgment. Improve future work efficiency.

2: The second point is to facilitate the loading of Web programs on different interfaces, and whether to introduce this part of the mobile terminal judgment code.

Specific implementation:

We separate the script for judging access. If a page needs to be judged by the client terminal, we will directly use <script></script> to introduce it on the page. Script program, the specific judgment code is as follows:

Copy code The code is as follows:

function uaredirect(f ){
try{if(
document.getElementById("bdmark")!=null){
return
}
var b=false;
if(arguments[1] ){
var e=window.location.host;var a=window.location.href;
if(isSubdomain(arguments[1],e)==1){
f=f "/ #m/" a;b=true}else{if(isSubdomain(arguments[1],e)==2){f=f "/#m/" a;b=true}
else{f= a;b=false}}}
else{b=true}if(b){var c=window.location.hash;
if(!c.match("fromapp")){
if((navigator.userAgent.match(/(iPhone|iPod|Android|ios|Windows Phone)/i))){location.replace(f)}}}}catch(d)
{}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template