미남이의 이러쿵저러쿵 iPhone에서 보는 미남이의 이러쿵저러쿵

아래 snippet은 Touch Events를 지원하는 iPhone/iPad에서 기존 mousedown/mouseup events를 대신하는 touchstart/touchend event 탐지 목적에 쓰일 수 있다.

if ('createTouch' in document) {
    // Touch events are supported.
    // So we can use touch events like 'touchstart' or 'touchend' instead of mousedown/mouseup.
}

iPad에서의 click event handling은 약간 지체되는 느낌이 있으므로, 되도록이면 대응하는 touch events를 써주는 것이 좋을 것이다.

그리고 참고로, Android에선 Touch Events를 지원하지만 위의 방법을 사용할 수 없다고 하니, 어쩔 수 없이 navigator.userAgent도 살펴봐야 한다.

function supportsTouch() {
    var android = navigator.userAgent.indexOf('Android') != -1;
    return android || !!('createTouch' in document)
}

꼬리표: iPad, iPhone, iPod touch, Touch Events

iPhone 4의 Retina display는 잘 알려진 바와같이 326dpi의 높은 해상도를 지니고 있다.
물론, 이것은 장점 중에 하나로 일려져 있지만, 이 고해상도 화면을 가지고 일반 웹 사이트에 표시되는 그림들을 보면 결국 2배로 확대된 픽셀 형태로 보여지는 결과를 낳게 된다.

그래서, 앞으로 점점 늘어날 이런 고해상도 display를 염두해 둔 이미지를 준비해놓지 않는다면 정교한 화면의 장점을 충분히 활용하지 못할 것이라는 얘기다.

이런 고해상도 display에 대한 준비 요령은 이미 제시되어 있는데, 해결책은 결국 CSS3(background-size, ::marker pseudo-element, boarder-image)와 SVG에서 찾을 수 있다는 소리.

자, 이렇게 해서 준비된 고해상도 이미지를 진정 고해상도 display를 가진 iPhone 4에만 보여주고 싶다면 아래의 CSS3 media query 안에서 적용해 주면 된다.

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone 4-specific styles go here */ }

지금 당장이야 그 필요성이 적겠지만, 앞으로 이런 고성능/고해상도 휴대 장비의 사용이 늘어나면 또 하나 progressive enhancement의 좋은 본보기가 되지 않을까? 이미 시작되었는지도.

꼬리표: CSS3, iPhone, SVG

We become what we behold.
We shape our tools and then our tools shape us.

Marshall Mcluhan, 1964

개발자와 사용자가 서로 만족해 하는 동시에, 두 집단 사이의 흥미로운 교감이 넘쳐나는 곳.
이것이야말로 어느 개발자든 참여하고 싶게 만드는 꿈의 소통 공간이 아니겠는가.

당장 필요한 것은 종이와 연필 뿐. 그래 시작이 반이다!

꼬리표: iPhone

iPhone용 웹 애플리케이션 개발을 위한 JavaScript, CSS, 이미지들이 포함된 iUI – iPhone User Interface Library가 오랜만에 갱신되었다.

iUI 0.20 갱신 내용

WordPress의 iPhone용 인터페이스 제작 기법을 참고해서 만든 이 곳 블로그의 iPhone용 인터페이스에도 iUI가 사용되고 있는데, 새로운 파일을 덮어씌우고 기본 그림 배경을 흰색으로 바꾸는 작업으로 간단하게 갱신 완료.

그나저나, iPhone을 내 손아귀에 쥐어볼 수 있을 날은 언제일지…

꼬리표: iPhone, iPod touch, iUI, 웹 애플리케이션

iPhone의 caching 한계값(25 Kbytes)을 넘는 치장 목적의 커다란 배경 그림은 필요 없겠지.

/* iPhone */
@media only screen and (max-device-width: 480px) {
    #page {background-image: none;}
}

정작, iPhone Simulator에서만 제대로 적용되는 것을 확인함.
그나저나, CSS3의 Media Queries는 iPhone에 내장된 Safari 말고도, Opera Mobile v9 그리고 Opera Mini v4도 지원한다.
참고 – A List Apart: Articles: Return of the Mobile Style Sheet

꼬리표: CSS3, iPhone, media queries, Mobile Web, 웹 최적화