Question

我正在制作一个Web应用程序，它具有一些非常具体的交互功能，这些功能与屏幕尺寸相关。我计划创建2个版本的所述功能，一个用于桌面，一个用于移动。

这带来了定位屏幕尺寸的问题。我决定使用三星Galaxy Note作为我支持这些功能的移动版本的最高屏幕尺寸。但是，为此，我需要找出此屏幕的 CSS像素大小。

如果我知道显示屏是13.46厘米（5.29英寸）和800x1280像素（285像素），我怎么能找到它？

Answer 1

可以通过将像素宽度除以CSS像素比率并将其四舍五入到最接近的整数来计算CSS像素设备宽度。

在此列出：

http://www.canbike.org/CSSpixels/

Answer 2

如果你知道它的尺寸是800x1280px，那么你可以用这个来设定这个设备（以及所有更小的设备）：

@media only screen and (max-width: 1280px) {
    *your styles here*
}

同时将此内容添加到您网页的<head>部分：

<meta name="viewport" content="width=device-width">

Answer 3

对于移动设备，您可以使用

<meta name="viewport" content="width=device-width, height=device-height" >

并使用设备宽度

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}

如何从分辨率计算CSS像素？

3 个答案: