How does html judge the PC terminal and the mobile terminal to display different pictures?

Use JS to determine whether the page is opened on the mobile phone or on the PC side. We can use the Navigator object of JS, which contains information about the browser, with many attributes and methods, among which the userAgent attribute is used to return the information sent by the client to the server. The value of the user-agent header, through which we can judge whether the current page is on the mobile phone or on the PC based on whether it contains certain keywords.
For example: on a windows computer

console.log(navigator.userAgent)

The print information is as follows:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36

From the above printed information, we can see that there are windows keywords, so we can judge by using regular expressions to match keywords.

Detect whether it is currently a PC terminal or a mobile terminal

function device () {

var deviceName = navigator.userAgent.toLowerCase();

// If judges whether it is a mobile terminal; if it is, it is defined as a mobile terminal image; if not, it is defined as a PC terminal image;

if (/Android|iPhone|webOS|iPod|BlackBerry/.test(deviceName)) {

$adres = "./images/banner/m-banne1.jpg";

console.log("Mobile terminal");

} else {

$adres = "http://bbsfile.51xunyuan.com.cn/video-bg1.mp4";

console.log("pc端");

}

device()

function changeUrl () {

var video = document.getElementById("background-video");

// Assign the variable [adres] to [video] (this name can also be chosen at will);

images.src = $address

}

<!-- ID = [imags], this should correspond to the ID assigned above; if there are multiple images, just change the different IDs;

So, if you want to display videos on the PC side and pictures on the mobile side, how do you do it?

How does html judge the PC terminal and the mobile terminal to display different pictures?

Guess you like