如何强制浏览器显示3英寸宽的图像？

Question

拥有简单的HTML代码

<table>
    <tbody>
        <tr>
            <td>
                <img  ... >
            </td>
        </tr>
    </tbody>
</table>

和CSS样式

* {
    border:none;
    margin:0;
    padding:0
}
html {
    position:relative;
    min-width:342px;
    height:100%;
    min-height:319px
}
table {
    position:absolute;
    margin-left:-171px;
    margin-top:-159px;
    top:50%;
    left:50%
}
img, table {
    width:342px;
    height:319px;
}

所有这些都可以通过这个小提琴访问(在这个例子中只有红色框图像),

固定大小的图片水平和垂直居中.这很简单,但是在屏幕分辨率高的手机上看起来不太好,当大多数屏幕看起来都是白色并且在屏幕中间是某种东西时,如果没有放大,用户将无法识别.

使用<meta name="viewport" content="width=device-width">不会有太大帮助,就好像手机在4英寸宽度上有超过千像素的宽度,图像仍然只有几英寸宽.

我读了很多关于屏幕分辨率的问题,我还没有找到任何解决方案,因为大多数浏览器都假定为1英寸为96个像素,这样的工作in,pt或者pc是条死胡同.

如何强制浏览器使html页面内的图像让我们说3英寸宽？

Answer 1

这是不可能的.该in测量是打印,而不是视频输出.如果您使用width:8in;height:11.5in它,它将作为标准的Letter尺寸区域打印到纸张上.

即使在相同分辨率的屏幕上,一英寸也会不同.例如,手机与投影仪.它们都可以具有高分辨率,但投影图像上一英寸的像素将很小.此外,没有办法检测投影图像的大小将是什么,因为它是在投影仪的镜头处控制的(图片为20英尺投影仪屏幕,宽度为2000像素,即每英寸8像素).

实现像素到英寸测量的唯一可能方式是在直接测量所支持的每个移动设备之后对其进行硬编码,然后确定专门检测这些移动设备中每一个的存在的方法.这不是一件轻而易举的事情,很可能无法解决问题.

总而言之,不可能强制浏览器显示3英寸的大小,因为它真的不知道这意味着什么.坚持百分比,或为支持的移动设备创建像素到英寸转换库.