디바이스별 해상도

모바일 2015.07.14 18:34

http://indiecast.co.kr/150184216201

해상도 정리 

 

 

http://konatamoe.com/20159187691

해상도 차이를 비교

신고

'모바일' 카테고리의 다른 글

모바일 해상도 정리  (0) 2017.03.02
모바일 해상도 테스트  (0) 2015.12.29
디바이스별 해상도  (0) 2015.07.14
화면 터치시 터치영역 제거  (0) 2015.06.11
미디어쿼리 분기점  (0) 2012.11.10
[아이폰4 대응] css sprite, -webkit-background-size  (0) 2012.01.30
Trackback 0 : Comment 0

접근성 툴

웹표준/접근성 2015.07.07 07:59

접근성 툴

http://www.accesslint.com/

 

N-WAX  크롬 부가기능

OPEN-WAX  크롬, 파이어폭스 부가기능

K wah4.4 카도와프로그램

 

http://jos39.tistory.com/119

신고

'웹표준/접근성' 카테고리의 다른 글

레이블과 타이틀, 새창  (0) 2015.08.21
접근성 툴  (0) 2015.07.07
접근성 모음  (0) 2012.10.09
웹접근성 디자인  (0) 2012.06.20
디자인 명도대비 체크  (0) 2012.06.20
시각장애인 스크린리더 테스트  (0) 2011.06.15
Trackback 0 : Comment 0

화면 터치시 터치영역 제거

모바일 2015.06.11 17:17

 출처 : http://htglss.tistory.com/123

[Mobile] 모바일웹, 아이폰 터치 시 발생하는 탭 하이라이트 제거

Internet World/Mobile 2011/07/08 20:59
오랜만에 포스팅을 많이 하게 되네요. 이런건 좋지 않은데, 주기적으로 꾸준히 하는게 더 나을텐데 그게 잘은 안되네요. 약간은 어려운 감이 있습니다. 이번에 이야기 할 이야기는 iOS 사파리에서 일어나는 이야기 인데요. 원래는 이것을 '발생하는 문제'라는 표현을 썼었는데, 잘 생각해보니 이 것은 평소에 우리에게 도움을 주는 좋은 기능입니다.

아... 서론이 너무 길었죠? 그것은 바로 터치 시에 발생하는 검은 하이라이트 입니다.

이것이 무어냐 하면, iOS 사파리로 웹브라우징 시에 링크를 제대로 클릭했는가 확인할 수 있는 좋은 기능인데요. 아래 그림에서 보실 수 있습니다. 그림에서는 '미니홈피' 버튼을 터치 했을 때 오른쪽의 그림과 같이 검은 하이라이트가 생기게 됩니다. (다들 아시는 것 처럼 사파리 브라우저에서 클릭을 오래 누르고 있으면 하단에 메뉴가 나오게 되는데 이 사이에 신속하게 캡쳐를 하기위해 몇 장을 캡쳐했는지 모르겠습니다.)

 


하지만 이런 기능도 어떨 때는 좀 안나왔으면 하는 경우가 있을 수 있습니다. 저의 경우에는 앱 내에 들어가는 페이지를 제작하는데, 어플리케이션의 경우 터치를 눌렀을 때 발생하는 이벤트가 따로 있어서 그 디자인을 출력해야 하는데 하이라이트가 발생하면서 그 부분을 검게 가리게 되는 사태가 발생하게 되었습니다. 저와 비슷한 경우가 많이 있으실 것이라 예상됩니다. 그렇게 되면 이렇게 좋은 기능도 문제가 되는데요. 이 문제를 해결하는 방법은 아주 간단합니다. 하이라이트를 제거하고자 하는 링크에 스타일을 적용해주기만 하면 되는데요.


a { -webkit-tap-highlight-color:transparent;}


위의 속성을 원하는 링크에 주시면 해당 링크를 터치 시에 하이라이트가 나타나지 않습니다. 참 쉽네요. 이 하이라이트 속성은 또 다르게 사용할 수 있는데요. transparent 부분을 다른 컬러를 넣어서 사용하시면 하이라이트를 원하시는 컬러로 대체해서 사용하실 수 있습니다.

 

--------------------------------------------------------------------------------------------------------

안드로이드 계열에서 테스트중 터치시 파란색 불투명 영역이 백그라운드에 노출,  svg로 그린 동그라미 영역에 터치영역을 같이 잡아 동그라미를 터치할때 엉뚱한곳에 영역이 표시되었다. 터치영역을 li로 바꾸자 점을 터치할때는 엉뚱한 곳에, li 를 터치할때는 li 영역이 표시되었다.

* {-webkit-tap-highlight-color:transparent;} 를 해당 페이에만 넣어서 해결.

 

 

신고

'모바일' 카테고리의 다른 글

모바일 해상도 테스트  (0) 2015.12.29
디바이스별 해상도  (0) 2015.07.14
화면 터치시 터치영역 제거  (0) 2015.06.11
미디어쿼리 분기점  (0) 2012.11.10
[아이폰4 대응] css sprite, -webkit-background-size  (0) 2012.01.30
Carousel  (0) 2011.07.05
Trackback 0 : Comment 0

티스토리 툴바