Fatal编程技术网
  • javascript/
  • Javascript 不同屏幕上相同的图像大小（物理上）

Javascript 不同屏幕上相同的图像大小（物理上）

javascript

Javascript 不同屏幕上相同的图像大小（物理上）,javascript,screen,resolution,dpi,ppi,Javascript,Screen,Resolution,Dpi,Ppi,可能重复： 我正在构建一个网站，在每个设备或浏览器上都需要具有相同物理尺寸的图像。 假设图像完全适合iPhone5屏幕，也就是说，它的物理尺寸是3.49x1.96英寸（或4英寸对角线）。如果我在笔记本电脑的浏览器上看它，它还需要有3.49x1.96英寸的尺寸（显然分辨率较低）。在屏幕较小的iPhone4上，它甚至会切割图像的某些部分 我想我需要获得PPI/DPI，然后进行相应的调整，也就是说，如果设备具有iphone5的PPI/DPI，我需要将图像大小调整到50%。不过，我有点困惑，我是否需要

可能重复：

我正在构建一个网站，在每个设备或浏览器上都需要具有相同物理尺寸的图像。 假设图像完全适合iPhone5屏幕，也就是说，它的物理尺寸是3.49x1.96英寸（或4英寸对角线）。如果我在笔记本电脑的浏览器上看它，它还需要有3.49x1.96英寸的尺寸（显然分辨率较低）。在屏幕较小的iPhone4上，它甚至会切割图像的某些部分

我想我需要获得PPI/DPI，然后进行相应的调整，也就是说，如果设备具有iphone5的PPI/DPI，我需要将图像大小调整到50%。不过，我有点困惑，我是否需要考虑屏幕分辨率，因为在非移动设备上可能会发生变化。有人能帮我吗

在所有设备上，什么样的方法可以使这项功能正常工作？

我会使用srcset标记

<img src="foo-lores.jpg"
 srcset="foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x"
 alt="decent alt text for foo.">
2和6.5是相对分辨率
*来源：

您是否尝试将
中的
用作CSS的单元？它可能会在某些设备上工作。我预见到在浏览器之间实现一致性的噩梦…您将发现您的目标是不可能的（此时）。许多设备模拟器要求用户指定用户屏幕大小，请参阅browserstack: