search
HomeWeb Front-endJS TutorialHow does js determine whether the user is accessing on PC or mobile terminal_javascript skills

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)
{
}
Statement
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
pc端是电脑还是手机pc端是电脑还是手机Feb 20, 2023 pm 03:19 PM

pc端是电脑。pc全称Personal Computer,中文意思为个人计算机或者个人电脑;PC端是指网络世界里可以连接到电脑主机的那个端口,是基于电脑的界面体系,它有别于移动端的手机界面体系。

pc端是什么意思pc端是什么意思Jan 02, 2021 pm 04:41 PM

pc全称Personal Computer,中文意思为个人计算机或者个人电脑;PC端是指网络世界里可以连接到电脑主机的那个端口,是基于电脑的界面体系,它有别于移动端的手机界面体系。

解决Vue移动端多触点问题解决Vue移动端多触点问题Jun 30, 2023 pm 01:06 PM

在移动端开发中,我们经常会遇到多手指触控的问题。当用户在移动设备上使用多个手指滑动或缩放屏幕时,如何准确地识别和响应这些手势是一个重要的开发难题。在Vue开发中,我们可以采取一些措施来解决移动端多手指触控问题。一、使用vue-touch插件vue-touch是一个用于Vue的手势插件,它可以方便地处理移动端的多手指触控事件。我们可以通过npm安装vue-to

Vue开发中如何解决移动端双击放大问题Vue开发中如何解决移动端双击放大问题Jun 29, 2023 am 11:06 AM

随着移动端设备的普及,使用Vue进行移动端开发已经成为了常见的选择。然而,我们在移动端开发过程中经常会面临一个问题,就是双击放大。本文将针对这一问题,探讨在Vue开发中如何解决移动端双击放大的具体方法。移动端双击放大问题的出现,主要是因为移动设备在触摸屏上进行双击操作时,会自动放大网页的缩放比例。对于一般的网页开发来说,这种双击放大通常是有好处的,因为它可以

pc端是什么意思?pc端是什么意思?Jan 16, 2024 am 10:23 AM

PC端通常是指个人电脑,包括台式电脑、笔记本电脑等,是人们常用的设备之一。PC端一般指的是运行在电脑上的一种操作系统和应用程序的集合体,它具有强大的运算处理能力和人机交互界面,通常用于进行各种办公、娱乐、设计、编程等活动。

使用Python和百度地图API实现移动端地图定位功能的方法使用Python和百度地图API实现移动端地图定位功能的方法Jul 29, 2023 pm 11:33 PM

使用Python和百度地图API实现移动端地图定位功能的方法随着移动互联网的发展,地图定位功能在移动端应用中变得越来越常见。Python作为一种流行的编程语言,也可以通过使用百度地图API来实现移动端地图定位功能。下面将介绍使用Python和百度地图API实现地图定位功能的步骤,并提供相应的代码示例。步骤一:申请百度地图API密钥在开始之前,我们首先需要申请

Vue开发:优化移动端手势缩放卡顿问题Vue开发:优化移动端手势缩放卡顿问题Jun 30, 2023 pm 04:33 PM

Vue开发中如何解决移动端手势缩放页面卡顿问题近年来,移动端应用的普及使得手势操作成为用户交互的重要方式。在Vue开发中,实现移动端手势缩放功能往往会遇到页面卡顿的问题。本文将探讨如何解决这一问题,并提供一些优化策略。了解手势缩放原理在解决问题之前,我们首先需要了解手势缩放的原理。手势缩放通过监听触摸事件来实现,当用户用两个手指滑动屏幕时,页面会按照手指的滑

如何处理PHP表单中的移动端和响应式设计如何处理PHP表单中的移动端和响应式设计Aug 10, 2023 am 11:51 AM

如何处理PHP表单中的移动端和响应式设计随着移动设备的普及和使用频率的增加,以及越来越多的用户使用移动设备访问网站,适配移动端成为了一个重要的问题。在处理PHP表单时,我们需要考虑如何实现移动端友好的界面和响应式设计。本文将介绍如何处理PHP表单中的移动端和响应式设计,并提供代码示例。1.使用HTML5的响应式表单HTML5提供了一些新特性,可以方便地实现响

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Hot Tools

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function