如何在html中检测打开的系统 HTML如何检测打开系统？

如何在HTML中检测打开的系统

1、通过navigator对象检测系统信息

在HTML中，可以通过navigator对象中的一些属性来获取用户的系统信息，比如userAgent属性可以获取用户使用的浏览器信息，platform属性可以获取用户使用的操作系统信息。

代码示例：

if(navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)){
    console.log("当前是移动设备");
} else{
    console.log("当前是PC设备");

2、通过JavaScript检测浏览器

可以通过判断浏览器的名称和版本来检测用户的系统信息，这一般需要使用到JavaScript中的一些特性，比如正则表达式、条件语句等。

代码示例：

var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
var isOpera = navigator.userAgent.indexOf('Opera') > -1;
var isChrome = navigator.userAgent.indexOf('Chrome') > -1;
if (isFirefox){
    console.log('当前浏览器是Firefox');
} else if (isOpera){
    console.log('当前浏览器是Opera');
} else if (isChrome){
    console.log('当前浏览器是Chrome');

3、利用CSS media查询检测设备

CSS中的媒体查询功能可以根据不同的设备来为页面设置不同的样式表，这也可以用来检测用户的系统信息。

代码示例：

@media only screen and (max-width: 767px) {
  /*当前设备宽度小于等于767px即为手机端*/
  body {
    font-size: 12px;
  }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /*当前设备宽度在768px-1024px之间为平板*/
  body {
    font-size: 14px;
  }
@media only screen and (min-width: 1025px) {
  /*当前设备宽度大于等于1025px即为电脑端*/
  body {
    font-size: 16px;
  }

4、使用JavaScript检测屏幕分辨率

可以通过用户屏幕的分辨率来初步判断用户的设备类型，一般PC设备的屏幕分辨率较高，而移动设备的分辨率较低。

代码示例：

var width = window.screen.width;
var height = window.screen.height;
if (width > 1024 && height > 768) {
    console.log('当前设备分辨率较大，可能为PC设备');
} else {
    console.log('当前设备分辨率较小，可能为移动设备');