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

Question

这是它在桌面上的样子：

这是它在移动设备中的外观：

相关的CSS：

样式.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

各种设备上的像素“物理”大小取决于像素密度（以每英寸像素或 ppi 衡量）和设备使用的乘数。

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

查看此内容以获取有关哪个设备具有什么 ppi 的更多信息：http ://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

Answer 2

像素可以是不同的大小。

一些浏览器还允许放大渲染元素以帮助视觉上的挑战，因此尺寸可以不同。