프리랜서 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[MOBILE] 모바일 웹 개발 설정

2016.02.04
1. 페이지 사용자 설정

<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;"/>


- width=device-width 페이지를 자동으로 사용자 디바이스 사이즈에 맞춘다. 물론 별도의 수치값으로 고정 시킬수있슴.

- initial-scale=1.0 페이지가 로딩될때 확대비율을 정할수 있다. 값이 커질 수록 확대 비율된 모습으로 페이지가 나타난다

- maximum-scale=1.0 허용가능한 확대비율의 최대치를 설정한다. 범위 0~10 기본값 1.0

- minimum-scale 범위 0~10 기본값 10

- user-scalable=0 사용자의 확대보기를 허용할지 여부를 설정한다. 범위 yes(사용한다) 또는 no(사용하지 않는다) 기본값: yes


****모바일에서 VIEWPORT가 지원 되지 않을때
모든 모바일 브라우져에서 지원 되지 않는 경우는 meta tag를 사용 할 수 있습니다.
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="320">



결론...
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />









2. 모바일 input 타입 키보드 설정

<input type="text" /> 모바일 키보드가 제공.

<input type="password" /> 모바일 키보드가 제공.

<input type="email" /> 모바일 키보드 + @ / . 제공.

<input type="tel" /> 숫자 모바일 키보드가 제공.

<input type="url" /> 모바일 키보드 + / + . + .com 이 제공 .

<input type="search" /> 숫자 모바일 키보드가 제공됩니다 go 부분이 Search로 변경.

<input autocapitalize="off"> 폼에서 첫 글자입력이 자동 대문자 막기 (아이폰 전용)





3. 대표링크

- 전화걸기 : <a href="tel:0000-0000">고객센터</a>

- 문자보내기 : <a href="sms:0000-0000">문자보내기</a>

- 메일보내기 : <a href="mailto:메일주소">메일보내기</a>

- 메일보내기 : <a href="mailto:echos@blueweb.co.kr">메일보내기</a>







4. 화면전환시 텍스트 크기 고정

<style type="text/css">

* {-webkit-text-size-adjust:none;}

</style>




5. 모바일 디바이스기기로 웹사이트 접속시 자동으로 모바일 사이트로 접속하게 만들기
// pc 웹페이지에 삽입되는 코드
<?

$connect = '0';
extract(array_merge($HTTP_GET_VARS, $HTTP_POST_VARS));

?>





<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){

if(<?=$connect;?> == '0'){

document.location='모바일페이지 주소';

<? $connect = '0'; ?>

}

}

}

</script>






6. 주소창 자동 다운
// 소스
<script type="text/javascript" language = "javascript">

window.addEventListener('load', function() {

setTimeout(scrollTo, 0, 0, 1);

}, false);
</script>





7. PC 에서 모바일 페이지 접속 막기
// 소스
<?

if ( !preg_match('/iPhone|iPad|Android|iPod|ipod|blackberry|opera mobile/',$_SERVER['HTTP_USER_AGENT']) ) {
echo '<br><br><br><center>이 페이지는 PC에서 접속하실 수 없습니다. </BR>모바일 기기 및 스마트폰으로 접속해 주세요.</CENTER>';
exit;
?>


이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다. 꿘쓰 2017.02.10 73
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 3512
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 3512
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 2169
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 20764
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 55
225 [소스] Window.scroll() 꿘쓰 2020.06.22 60
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 1
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.05.29 95
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 169
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 324
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 350
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 519
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 614
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 587
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 579
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
212 [소스] 별점주기 꿘쓰 2019.02.21 684
211 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 672
210 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 876
209 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 622
208 [CSS] 줄바꿈, URL 줄바꿈을 위한 CSS 꿘쓰 2019.01.04 664