픽셀을 사용하고 있어도 데스크톱과 모바일에서 높이가 다릅니 까?

Question

이것은 바탕 화면 모습입니다 :

이는 모습입니다 모바일 :

관련 CSS :

styles.sass :

item 
    .row 
    cursor: pointer 
    height: 297px 
    .top-border 
     border-top: 2px dotted $brand-four 
     margin: 30px 0 40px 

라이브 사이트 :

http://alexandrochen.com/

(필자는 Foundation 프레임 워크를 사용하고 있습니다).

이 문제의 원인은 무엇일까요?

Answer 1

픽셀의 크기가 다를 수 있습니다.

일부 브라우저는 시각적 인 문제를 해결할 수 있도록 렌더링 된 요소의 배율을 허용하므로 크기가 다를 수 있습니다.

Answer 2

다양한 장치의 픽셀 "물리적"크기는 픽셀 밀도 (인치당 픽셀 또는 PPI로 측정)와 장치가 사용하는 배율에 따라 다릅니다.

예를 들어 맥북 프로 레티 나 15 인치는 220ppi이고 일반 맥북 프로는 110ppi이지만 OS는 내부적으로 픽셀 수에 2를 곱하여 망막의 픽셀 수를 "실제"크기 인 .. 장치가 무엇 PPI이있는에 대한 자세한 내용은 유사하지만 망막은 같은 양의 데이터를 렌더링하기 위해 픽셀의 두 배를 사용하기 때문에, 비트 맵 픽셀 화됩니다

확인이 아웃 : 내가 볼 http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density