<div class="modal show">
<div class="content">
<small>현재 감지된 브라우저는?</small>
<p></p>
</div>
</div>
.content p {
font-size: 24px;
font-weight: bold;
}
/* ------------------- */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Pretendard;
word-break: break-all;
outline: none;
}
body {
display: flex;
align-items: flex-end;
justify-content: center;
height: 100vh;
background: #f7f8fc;
padding: 1.2rem 0;
}
button {
display: flex;
align-items: center;
justify-content: center;
width: 20rem;
height: 50px;
margin-top: 1rem;
font-size: 1.1rem;
background: #febf00;
border: none;
border-radius: 5px;
cursor: pointer;
}
.modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
.modal > .content {
position: absolute;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 500px;
width: 85vw;
height: 100px;
padding: 24px;
background: #fff;
border-radius: 5px;
transform: translate(-50%, -50%);
}
small {
color: #444;
}
function getBrowser() {
const browsers = [
'Chrome', 'Opera',
'WebTV', 'Whale',
'Beonex', 'Chimera',
'NetPositive', 'Phoenix',
'Firefox', 'Safari',
'SkipStone', 'Netscape',
'Mozilla',
];
const userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.includes('edg')) {
return 'Edge';
}
if (userAgent.includes('trident') || userAgent.includes('msie')) {
return "Internet Explorer";
}
return browsers.find(browser => userAgent.includes(browser.toLowerCase())) || 'Other';
}
// -----------------------------------------
document.querySelector('.content p').innerHTML = getBrowser();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.