即使我使用像素，桌面和移动设备的高度也不同？

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为单位）和设备使用的乘数。

例如，MacBook Pro Retina 15“具有220 ppi，而常规Macbook Pro具有110 ppi。但操作系统在视网膜内部将像素数乘以2，因此您的项目的”物理“尺寸应为类似。但由于视网膜使用两倍的像素来渲染相同数量的数据，因此位图看起来会像素化。

查看此信息，了解有关哪种设备具有ppi：http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

的更多信息