Skip to content

Instantly share code, notes, and snippets.

@ruseel
Created June 14, 2016 08:49
Show Gist options
  • Save ruseel/209d1116d4fef595500a18ea7849789d to your computer and use it in GitHub Desktop.
Save ruseel/209d1116d4fef595500a18ea7849789d to your computer and use it in GitHub Desktop.
모바일웹에서의 pixel, hardware pixel, css pixel, point, dp ...

개념을 잡기에 좋았던 글이, 첫째로 여기였는데

  http://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/

여기서 pixel이란 single dot 이라는 개념이고 hardware 와 직접 관련된 개념이라는 것, 그리고 points는 iOS에서 사용하는 추상 척도(abstract measurement), density independent pixel는 Android에서 사용하는 추상척도라는 것을 알 수 있었다.

둘째로 iPhone에서 point와 pixel 간의 관계에 대해서 iPhone2G 시절부터 최근까지 잘 정리해 놓은 여기가 어떤 변화가 있었는지 알아보기 좋았다.

  http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

세째로 mobile web browser에서 혹은 width=device-width 가 어떤 뜻인지 감을 잡으려면 여기가 도움이 되었다.

  http://www.quirksmode.org/mobile/viewports2.html

visual viewport랑 layout viewport 의 차이와 zoom 때문에 변하는 부분은 무엇인지 약간 더 이해가 되었다.

넷째로 web develeper에게 필요한 css pixel 이라는 개념이 있고, 이 두 글이 괜찮다.

   http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
   http://www.howdesign.com/featured/hardware-css-pixels-retina-display/

iPad 1st와 iPad 2nd를 비교하면 hardware pixel이 2배는 늘었지만 css pixel 사이즈는 그대로 변하지 않았다.

css pixel의 mobile 기기별 크기를 여기서 볼 수 있다. 보통 320 이라고 보면 크게 무리 없겠다.

  http://www.mydevice.io/devices/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment