userAgent 에이전트를 이용한 모바일 페이지로 자동 이동

# Work/Javascript 2015. 10. 15. 09:58 |
반응형

<script 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){
        location.href = "보내고 싶은 모바일 경로";
        break;
    }

}
</script>


반응형
저작자표시 비영리 변경금지

'# Work > Javascript' 카테고리의 다른 글

node.js 개발환경 셋팅 (grunt.js 클라이언트 설치)  (0) 2015.06.03
Node.js란  (0) 2015.05.26
if문의 축약형  (0) 2015.02.16
자바스크립트 기초-7 object,DOM  (0) 2012.01.02
자바스크립트 기초-6 이벤트  (0) 2011.12.30
호정찐

[스크랩] [Mobile] 모바일웹, input type 에 따른 아이폰 키보드의 변화

# Work/Mobile 2015. 10. 15. 09:49 |
반응형

[펌] input type에 관련해 정리가 아주 잘 되어있음.

http://htglss.tistory.com/74



아이폰으로 인터넷을 하다보면은 여러가지 폼에다가 입력을 해야 할 경우도 많습니다. 아이폰을 사용해보신 분들은 아시겠지만 상황에 따라서 다른 키보드가 뜨는데요. 오늘은 input 박스의 type에 따라 다르게 뜨는 키보드의 모양의 분석해 보겠습니다.


우선 기본적으로 나오는 type=text 일 경우에는 다음과 같은 키보드가 나옵니다.


text일 경우에는 기본적인 키보트가 뜹니다. 인풋박스들이 <form> 태그에 쌓여있기 때문에 아래에는 "go" 라고 버튼이 뜹니다.

그렇다면 다음에 있는 땡땡땡 부분은 다들 아시다시피 password 부분입니다. 그 곳에 포커스가 가게 되면,


위와 같은 키보드가 돌출하게 되는데, 한가지 다른 점은 처음에 입력하는 값을 대문자로 입력하게 해주는, shift가 안눌려있습니다.


다음은 이메일인데, type을 email로 했을 경우에는 아주 친절하게도 @ 와 . 이 나오게 됩니다. 입력하기 참 쉽겠죠?


type=number 에 포커스 되었을 때는 특수문자를 눌렀을 경우와 같은 키보드가 나옵니다.


오늘의 하일라이트, type=tel 일경우에는 전화번호를 쉽게 입력할 수 있도록 전화번호 키패드가 뜨게 됩니다. 이거 정말 마음에 드네요. 주민등록번호나 전화번호를 입력할 때 사용하면 좋을 듯 합니다.


url의 경우도 email과 비슷합니다. url을 쉽게 입력할 수 있도록 /(슬래시)와 .com(닷컴)이 나오게 됩니다. 입력할 때 편하겠네요.


type=search 일 경우는 "Go" 부분이 "Search"로 변하고 나머지는 동일합니다. 다른 것들은 text와 동일하게 뜨므로 이미지는 생략하였습니다.


반응형
저작자표시 비영리 변경금지

'# Work > Mobile' 카테고리의 다른 글

[스크랩] 안드로이드 크롬 브라우저 풀 스크린  (0) 2018.04.16
반응형 웹에서 이미지맵 걸기  (0) 2015.09.03
페이지 로딩 후 상단 주소바 감추기  (0) 2015.08.26
아이폰 사파리 브라우저에서 숫자에 자동링크 제거하는 법  (0) 2015.08.25
모바일 작업시 해상도 계산하기  (0) 2015.06.19
호정찐

display:inline 사용시 공백제거 (모든 브라우저)

# Work/HTML/CSS 2015. 9. 8. 15:08 |
반응형

ul{letter-spacing:-4px;font-size:0;line-height:0;}
ul li{display:inline-block;*display:inline;*zoom:1;letter-spacing:설정값;font-size:설정값;line-height:설정값;}

이렇게 적용하면 ie 하위브라우저, 스탠다드 브라우저, 사파리 모두 적용이 가능 하다고 함.

(사파리에서.. letter-spaicing -4px 이상을 줘야 제대로 적용되보임...)

반응형
저작자표시 비영리 변경금지

'# Work > HTML/CSS' 카테고리의 다른 글

IOS에서 전화번호 부분 자동 색상 변경 방지  (0) 2018.12.17
웹접근성을 지원하는 그래프 차트 플러그인 nWagon  (0) 2014.02.13
mailto 의 여러 속성  (0) 2014.01.15
<button> 태그 관련  (0) 2013.11.28
select박스 스타일 주기 스크립트  (0) 2013.10.17
호정찐

티스토리툴바