正文  图形图像 > 像素/屏幕/分辨率 >

如何在手机浏览器上显示完整图片

在过去几周内,看了一些文章,其中有一篇写的是关于手机像素的,内容讲述了硬件像素与实际显示像素,能否用CSS及Meta的像素比解决。那篇文章的确写得不错,虽然我不是移动开发者,不需要深入研究这些问题,但我也......

在过去几周内,看了一些文章,其中有一篇写的是关于手机像素的,内容讲述了硬件像素与实际显示像素,能否用CSS及Meta的像素比解决。那篇文章的确写得不错,虽然我不是移动开发者,不需要深入研究这些问题,但我也希望能一同探讨解决的方法,于是写了这篇文章。

在我的web工作中,会考虑到有那么多种类的移动设备,但我至少让我开发的页面的外观和操作能适用在iPad / iPhone上。我通常担心的是viewport的meta标签,它设置的不好就可能导致页面混乱。我们来看下这个标签:

<meta name="viewport" content="width=1280, initial-scale=1">

<meta name="viewport">标签有许多属性,如width, min/max-scale 和 initial-scale。

width是直接定义页面内容的像素宽度。如果指定max/min/initial-scale,就是一个最小视图的宽度。无论怎样,手机用户至少能看到这样宽度的内容。

另外,我们再来说说initial-scale(初始比例)。我这里有个1280X960图片,图片是10*10px的正方形组成的色块。

我将用一个公式来分析这个初始比例的作用,此公式有3个变量。

  • D =实际设备的硬件像素(320)
  • S =初始的比例值(1)
  • n =实际显示在设备上的像素

公式的表达式如下:

gif

当初始比例设置为1时,总宽度1280像素,只有320像素的图片显示。这是因为iPhone的宽度是320像素,320/1 = 320。

initial-scale-1

当我们把初始比例设为2,那么只有180像素被显示。

initial-scale-2

当初始比例减少到0.5时,就有640像素被显示。

initial-scale-_50

最后,当初始比例减少到0.25,这时1280像素就被完整显示出来。

initial-scale-_25

以上表明,不同的初始比例显示出的像素也不同。

我们还要知道如何去使用最大和最小比例。如果我们在viewport的meta标签中设置minimum-scale=.50,那么我们的用户将无法看到宽度大于640像素的关闭按钮。

同样,如果你设置maximum-scale=1,那么我们的用户在同一时间将无法看到超过320像素宽度的页面内容,他们将被迫移动页面才能看到所有的内容。

最后要说的是,虽然我们这个例子是通过iPhone来举例,但是这个公式适用在所有的移动设备上。