Javascript를 사용하여 사용자 브라우저를 감지하는 방법
9194 단어 incodercsshtmljavascript
이 작은 프로젝트 [사용자 브라우저 감지 방법]에는 위 이미지에서 볼 수 있듯이 Google Chrome, Mozilla Firefox, Opera, Microsoft Edge 등과 같은 브라우저의 텍스트와 일부 로고가 있습니다. 보시다시피 현재 사용 중인 브라우저 로고 하나를 제외하고 모든 로고가 희미해집니다. 내가 말하려는 내용을 이해할 수 없다면 소스 코드를 확인하고 미리 볼 수도 있습니다.
다음을 좋아할 수 있습니다.
미리보기를 확인할 수 있습니다here.
HTML 및 자바스크립트 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="title">You're currently using <span class="browserName">chrome</span> Browser</div>
<div class="logos">
<div class="browserLogo ieLogo"></div>
<div class="browserLogo edgeLogo"></div>
<div class="browserLogo firefoxLogo"></div>
<div class="browserLogo operaLogo"></div>
<div class="browserLogo chromeLogo"></div>
<div class="browserLogo safariLogo"></div>
</div>
</div>
<script>
function detectBrowser() {
let UA = navigator.userAgent
let browser;
if (!!document.documentMode == true) {
browser = "IE";
} else if (UA.match(/edg/i)) {
browser = "edge";
} else if (UA.match(/firefox|fxios/i)) {
browser = "firefox";
} else if (UA.match(/opr\//i)) {
browser = "opera";
} else if (UA.match(/chrome|chromium|crios/i)) {
browser = "chrome";
} else if (UA.match(/safari/i)) {
browser = "safari";
} else {
alert("You are using another browser");
}
return browser
}
function setBrowser(browser) {
let logo = document.querySelector(`.${browser}Logo`)
let browserName = document.querySelector(`.browserName`)
logo.classList.add('current')
browserName.innerHTML = browser
browserName.classList.add(browser)
}
setBrowser(detectBrowser().toLowerCase())
console.log(detectBrowser())
</script>
<!-- Code injected by live-server -->
<script type="text/javascript">
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function () {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
var parent = elem.parentElement || head;
parent.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
parent.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
}
// ]]>
</script></body>
</html>
CSS 코드
/* --------------------- Created By InCoder --------------------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.container {
height: 100vh;
background-color: rgb(0 0 0 / 80%);
}
.container .title {
color: #fff;
font-weight: 500;
text-align: center;
padding-top: 1.8rem;
font-size: clamp(2rem, 4vw, 3rem);
}
.browserName {
text-transform: capitalize;
}
.browserLogo {
height: 7rem;
transition: all 0.3s;
filter: grayscale(0.9);
width: clamp(7rem, 4vw, 5rem);
}
.chrome {
font-weight: 800;
color: #fbc011;
}
.opera {
font-weight: 800;
color: #ff1429;
}
.ie {
font-weight: 800;
color: #37a5e2;
}
.edge {
font-weight: 800;
color: #38cb54;
}
.firefox {
font-weight: 800;
color: #b93ce7;
}
.safari {
font-weight: 800;
color: #0184ca;
}
.logos {
height: 65%;
display: flex;
align-items: center;
justify-content: space-around;
}
.chromeLogo {
background: url(https://drive.google.com/uc?id=199wEkk6kQbv_OzgTLSAdAZ5c86gLNnCP&export=view) no-repeat center 100%;
background-size: cover;
}
.operaLogo {
background: url(https://drive.google.com/uc?id=1OGVcfiKtfCWztQm8yMUT2GCz_BpwftWD&export=view) no-repeat center 100%;
background-size: cover;
}
.ieLogo {
background: url(https://drive.google.com/uc?id=1yg5gjO7yaXLQuAA8rrJ84JCApzyi0BZB&export=view) no-repeat center 100%;
background-size: cover;
}
.edgeLogo {
background: url(https://drive.google.com/uc?id=13Y8-krv89SAu3SL8qlSjddMnOODiCUix&export=view) no-repeat center 100%;
background-size: cover;
}
.firefoxLogo {
background: url(https://drive.google.com/uc?id=1dH-uY09eDhZZriVArof2bpr7Nux4tKjT&export=view) no-repeat center 100%;
background-size: cover;
}
.safariLogo {
background: url(https://drive.google.com/uc?id=1-wMfuXglcL27eXEihH2ODqPQb0fWjpfi&export=view) no-repeat center 100%;
background-size: cover;
}
:is(.operaLogo, .chromeLogo, .ieLogo, .edgeLogo, .firefoxLogo, .safariLogo) {
transform: scale(.9);
}
:is(.operaLogo, .chromeLogo, .ieLogo, .edgeLogo, .firefoxLogo, .safariLogo).current {
filter: grayscale(0);
transform: scale(1.2);
}
@media (max-width: 710px) {
.browserLogo {
width: 4rem;
height: 4rem;
}
}
@media (max-width: 500px) {
.browserLogo {
width: 3rem;
height: 3rem;
}
.logos {
flex-wrap: wrap;
}
.logos div {
margin-left: .3rem;
}
}
@media (min-width: 1440px) {
.logos {
max-width: 70%;
justify-content: center;
}
}
Reference
이 문제에 관하여(Javascript를 사용하여 사용자 브라우저를 감지하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/incoderweb/how-to-detect-user-browser-using-javascript-20g2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
