브라우저 제목
  • 디지털(반응형)11월19일
  • 빛그림
  • Feb 11, 2019
  • 63

만들어보기 예제

동영상은 아래에 있습니다.

navigator는 브라우저에 대한 정보를 제공

속성 설명
appCodeName 브라우저의 코드명을 제공
appName 브라우저의 이름을 제공
appVersion 브라우저의 기본 버전과 실행 중인 플랫폼 정보를 제공
userAgent 브라우저의 전체적인 정보를 제공

 

<script type="text/javascript">
document.write("코드명 : "+navigator.appCodeName+"<br>");
document.write("브라우저명 : "+navigator.appName+"<br>");
document.write("플랫폼 버전 :"+navigator.appVersion+"<br>");
document.write("전체정보 : "+navigator.userAgent+"<br>");
</script>

 

<script type="text/javascript">
var myAgent=navigator.userAgent.toLowerCase();
var mobile=["iphone","ipod","android","blackberry","window ce","nokia","webos","opera mine","sonyericsson","opera mobi","iemobile"];
for(var i=0; i<mobile.length;i++){
    document.write(myAgent+"<br>");
    document.write(mobile[i]+"<br>");
    document.write(myAgent.indexOf(mobile[i])+"<br>");
}
</script>

 

http://comlearn.co.kr/ex/expc.html

 

userAgent를 이용한 모바일 변경

<script type="text/javascript">
var myAgent=navigator.userAgent.toLowerCase();
var mobile=["iphone","ipod","android","blackberry","window ce","nokia","webos","opera mine","sonyericsson","opera mobi","iemobile"];
for(var i=0; i<mobile.length;i++){
    if(myAgent.indexOf(mobile[i])>=0){
    location.href="http://m.naver.com";
    break;
    }
}

</script>
</head>
<body>
<h1>PC버전 페이지</h1>
</body>

 

하나의 주소로 입력했을 때 pc버전페이지와 모바일버전 페이지를 구분해서 표시하는 방법

기본 페이지( main.html)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>pc mobile</title>
<script type="text/javascript">
var myAgent=navigator.userAgent.toLowerCase();
//기기의 환경(navigator.userAgent)의 값을 myAgent에 저장
//toLowerCase는 모든 문자열을 소문자로 변경 
var mobile=["iphone","ipod","android","blackberry","window ce","nokia","webos","opera mine","sonyericsson","opera mobi","iemobile"];
// mobile 변수의 공간에 환경의 값과 비교할 값을 저장
//[], 배열공간
for(var i=0; i<mobile.length;i++){
//반복( 초기값=0; 최종값(mobile의 개수만큼); 증가값(1씩 증가) )
    if(myAgent.indexOf(mobile[i])>=0){
//indexOf(mobile[i])은 배열공간의 위치값을 가지고 찾는다.
    location.href="m.html";
//모바일에 접속되었다면 접속할 페이지 주소
    break;
    }
}

</script>
</head>
<body>

<h1>pc페이지</h1>

</body>
</html>

 

 

 

모바일 페이지( mo.html )

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>모바일</title>

</head>
<body>
<p>모바일 버전</p>
<p>모바일 버전</p>
<p>모바일 버전</p>
<p>모바일 버전</p>
<p>모바일 버전</p>
<p>모바일 버전</p>
</body>
</html>

 

 

 

제목 날짜
5일차-아트보드 삭제, 아트보드 저장, 크롭툴, 영역정리, 패스 2018.11.06
2일차 2018.11.20
html css정리는 http://comlearn.co.kr/html_css 게시판에 내용 업로드 됩니다. 2019.02.13
21일차 html 시작 2018.12.16
42일차 휠 애니메이션 2019.01.16
9일차 file 2018.11.28
11일차-인물 패스, 영역 다듬기, 브러시 file 2018.12.02
10일차 2018.11.29
57일차 - 데스크탑, 모바일 구분 접속 2019.02.11
12일차-브러쉬, 그라데이션 file 2018.12.03
30일차 예제 페이지 만들기 file 2018.12.29
22일차-목록과 네비게이션 file 2018.12.18
43일차 attr매서드 스트링 slice() 2019.01.17
1일차-오리엔테이션 2018.11.18
34일차-위아래 슬라이딩 배너, 앵커위치 찾아가는 애니메이션(해시) file 2018.12.16
37일차 특정위치에서 애니메이션 2019.01.11
4일차 2018.11.22
20일차 스케치활용, 로고, 표제작 file 2018.12.14
38일차 휠 애니메이션 과 네비 메뉴 클릭 drop-down file 2018.12.20
52일차 form작성 방법 2019.01.27
태그 목록