meta태그 기본
해당 브라우저에서 화면에 맞게 자동 조절
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
user-scalable=no : 사용자의 확대보기 허용 여부(no/yes)
initial-scale=1.0 : 페이지 로딩시 확대비율
maximum-scale=1.0 : 최대확대비율
minimum-scale=1.0 : 최소축소비율
width=device-width : 플랫폼 가로 크기에 맞춤, 수치를넣으면 그수치에 맞게 맞춰짐.
target-densitydpi=medium-dpi : dpi([dots per inch])를 머... 맞추라는 거겠지여? 아닌가.. ㅎㅎ
위 태그로 거의 모든 스마트폰 공용으로 웹페이지의 넓이가 디스플레이 크기에 맞춰집니다.
그 외에 메타태그
<meta name="format-detection" content="telephone=no" />
아이폰 사파리에서 전화번호 링크를 마음대로 하는 경우가 있는데 그럴 경우
이렇게 하면 자동 링크가 되지 않는다.
<meta name="Robots" content="noindex,nofollow">
긁지 않고, 링크도 무시함.
네이버 모바일 - http://m.naver.com/
[출처] 모바일 meta태그 기본 사항|작성자 썬
유용한 스크립트
1. 픽스된 레이아웃구조는 절대로 사용하면 안됨. 항상 레이아웃은 변형가능한 상태로 제공이 되야먄 합니다.
(EX. width="100%" )
2. 툴바숨기기 (안드로이드의경우 웹페이지가 브라우징된후 주소창이 사라져야한다.)
- 네이버나 다음의 모바일웹사이트에 가보시면 주소창이 사라지는걸 확인할 수 있다.
<script type="text/javascript" language = "javascript">
window.addEventListener('load', function() {
setTimeout(scrollTo, 0, 0, 1);
}, false);
</script>
3. 회전에 따라 다른 css 적용하기
<script type="text/javascript">
function orient()
{
switch(window.orientation){
case 0: document.getElementById("orient_css").href = "1.css";
break;
case -90: document.getElementById("orient_css").href = "2.css";
break;
case 90: document.getElementById("orient_css").href = "3.css";
break;
}
}
window.onload = orient();
</script>
<body onorientationchange="orient();">
</body>
4. 스마트폰으로 접속시 해당페이지의 pc버젼판이 아닌 웹용페이지로 자동 링크되어야한다.
- 모바일 웹페이지를 만들고 난뒤 가장 중요한 일입니다. 앞으로 스마트폰이 강력한 추세일테이고 그에따른 소,중,대기업들이
자사의 웹페이지외에도 모바일용 웹페이지를 제공하여 일반인들에게 더 빠르고 쉽게 접근이 가능하도록 할것입니다.
여기서 발생하 문제가 어떻게하면 기존에 웹페이지에서 pc로 접했을때와 스마트폰으로 접했을때 보여지는 페이지를 분류하냐는 겁니다. 간단한 방법으로는 기존 웹페이지에서 스마트폰으로 링크글 거는 방법이 있지만 이것은 기존 페이지를 보고 난뒤에 접하는 문제이기때문에 결코 올바른 해결방안이 아닙니다. 이 문제또한 자바스크립트를 통해 스마트폰의 종류를 구별한다음 알맞게 페이지 브라우징 처리를 할수있습니다.
<script language="Javascript">
var uAgent = navigator.userAgent.toLowerCase();
var mobilePhones = new Array('iphone','ipod','android','blackberry','windows ce',
'nokia','webos','opera mini','sonyericsson','opera mobi','iemobile');
for(var i=0;i<mobilePhones.length;i++)
if(uAgent.indexOf(mobilePhones[i]) != -1)
document.location="링크될 주소";
</script>
[출처] 기본 모바일 스크립트 팁|작성자 썬
폰트사이즈 고정
html { -webkit-text-size-adjust:none; }
페이지가 랜더링될때 모바일 사파리브라우져는 텍스트 Block 의 width에 맞춰(즉, 뷰포트가 변할시) 텍스트의 크기를 자동으로 조절한다. 이때 -webkit-text-size-adjust를 이용해 텍스트의 크기를 고정 또는 원하는 대로 조절할수있다.
-webkit-text-size-adjust 는 아래와 같이 3가지의 속성을 가지고 있다.
1. auto
body{-webkit-text-size-adjust:auto}
아무것도 지정하지않았을때와같다, 화면의 폭에 맞추어서 텍스트의 크기를 자동으로 조절한다.
2. none
body{-webkit-text-size-adjust:none}
폰트의 자동크기변환을 막는다. 모바일 웹에서는 폰트크기도 레이아웃 구성에 간접 영향을 주는 요소 가 될수 있으므로 일반적으로 none으로 설정한다.
3. n%
body{-webkit-text-size-adjust:120%}
폰트크기를 지정된사이즈로 변경한다.
* -webkit-text-size-adjust 속성 사용시 주의사항.
viewport 설정 의 "maximum-scale" 에 대한 설정이 있어야 하며 설정값이 1.0 이하여야만 적용된다.
(펌)http://bongdal.tistory.com/67
모바일 접속시 자동으로 이동
모바일 기기로 홈페이지 접속시 모바일 페이지로 자동으로 이동하는 소스
우선 도메인 접속시 실행화일 순서는 html, htm, php 의 순서이다.
기본 아이디어는 매우 단순하다. 접속시 맨 먼저 실행되는 index.htm에서 판단해서, 모바일기기에서 접속하면 모바일 홈페이지로 연결하고, PC에서 접속하면 PC 홈페이지로 연결하면 되겠다.
맨 먼저 판단하는 화일, PC홈페이지 파일, 모바일 홈페이지 파일 세 개로 구성된다.
=== index.htm ===
<html>
<head>
<script language="Javascript" type="text/Javascript">
var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson');
for (var word in mobileKeyWords){
if (navigator.userAgent.match(mobileKeyWords[word]) != null){
parent.window.location.href='모바일 홈페이지 주소/실행화일';
break;
}
}
</script>
</head>
<frameset cols="0, *" frameborder="0" border="0">
<frame name="contents" noresize>
<frame src="PC 홈페이지 주소/실행화일" name="detail" noresize>
</frameset>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
</body>
</html>
중요한 것은, 위의 빨간색 부분 parent.window. 를 붙이지 않으면 모바일 페이지가 큰 화면에 조그만 사이즈로 뜨게 된다능. 꼭 붙일 것.
자기 홈페이지 주소 앞에 m.을 붙여서 서브 도메인 만드는 법은 네이버 검색을 해보시오.
그런 다음 모바일 홈페이지와 PC 홈페이지에서 각각 [PC버전 바로가기] [모바일버전 바로가기] 링크를 서로 걸어주면 되겠다.^^
(주의!) 위와 같이 하지 않고 위의 "모바일기기 판단부분" 소스를 PC용 웹페이지 상단에 넣어주면, 모바일기기에서 [PC버전]을 클릭해도 계속해서 모바일 버전만 뜨게 된다. 즉, 무한루프에 빠지게 된다.
---------------------------------------
모바일에서 홈페이지 접속시 모바일사이트 바로가기 및 유의점
감사합니다. 제 사이트에 스크립트를 넣었다가 PC버전으로는 보이지 않아 삭제했었는데
다시 해봐야 겠네요.
출처: http://blog.naver.com/jeong6612?Redirect=Log&logNo=20140367995
'모바일' 카테고리의 다른 글
| 모바일 코딩시 쓰는 코딩[펌] (0) | 2013.06.18 |
|---|---|
| 모바일 이미지맵 만드는 법 (0) | 2013.06.17 |
| 모바일 전화 링크 (0) | 2013.06.15 |