移动浏览器定位元素时就好像视图是 360 像素宽一样，但会以更高分辨率在页面上呈现图像。这是如何运作的？
Mobile browser positions elements as if the view is 360px wide, but renders images on the page at a higher resolution. How does this work?
我很难弄清楚如何表达这个。抱歉，如果这是一个菜鸟问题，我对响应式设计和移动网页设计一般来说是新手。
我的 phone (Galaxy s10e) 会将我的网页呈现为 360 像素宽，所有元素都根据此宽度适当定位。我在网站上有几个宽度相同的图像标签。我 是 使用 360 像素宽的 src 图像，这在桌面上看起来不错，因为它实际上以 360 像素渲染我的图像，但在移动设备上，单独的图像似乎以更高的分辨率渲染分辨率，导致它由于放大而看起来很糟糕。
如果有人可以向我解释这里发生的事情，那将非常有帮助，因为我找不到有关此特定行为的信息。我有一些问题：
- 在以屏幕分辨率呈现实际内容时，浏览器是否选择[=18=]定位基于 360 像素宽度的元素？
- 如何在我的设计中考虑到这一点？我考虑过以更高分辨率渲染图像，然后让页面动态缩小这些图像（因此即使实际 div 是 360px，浏览器也可以使用 max-width 分配的 'extra space' 来渲染图像分辨率更高），但我希望图像在桌面上保持 360 像素宽，而不是移动渲染的更高最大宽度。
- 我在哪里可以了解有关此行为的所有信息，以便我知道将来如何处理响应式图像缩放？
感谢您的宝贵时间。如果您有任何其他问题，请告诉我。我正在使用 ReactJS 开发网站。
好吧，简而言之，像素是相对大小。 phone.
上的一个像素并不是字面上的一个像素
发生的事情是 PPI 启动并基本上放大以使内容可读。
因为如果您真的尝试在具有该像素密度的 phone 上查看 360 像素，您实际上什么也看不到。
所以让我们看看一些 phone 规格：
6.1 英寸
5.90 x 2.77 x 0.31 英寸
分辨率 1440 x 3040 像素~每英寸 550 像素
视口 360 x 760 PX 每英寸 138 像素
现在视口就是您在屏幕上实际看到的内容。在这种情况下，它给你的像素比大约为 4。这意味着你的 phone 的分辨率是视口的 4 倍。
所以对于一个 div 设置为 200px 宽的网络应用程序，它会根据视口显示 200px，但这个 div 实际上是 800px 宽相对于你的phones 分辨率。
现在图片不需要这个限制了。如果您的图片仅显示 200 像素且像素密度是屏幕容量的四分之一，那么高分辨率显示有什么意义。
因此，图片在您的 phone 上存在于双重现实中。它有一个框大小，即图像相对于视口的大小，但框内的图像本身在相对于设备总屏幕像素的分辨率范围内。
因此，当您在视口中拥有 200 像素的图像时，其显示分辨率实际上是 800 像素。因此，当您将一张只有 200 像素的图片放在屏幕上时，视口缩放现在几乎是所有内容，您实际上是在将该图像拉伸到其实际大小的四倍。或者屏幕像素密度与视口的比率是多少。 AKA 它看起来像废话。
为了回答您的需求，我将引导您前往 MOZ，MOZ 将详细介绍原因和方法，并向您展示如何解决这个问题。
打击元素位置非常简单，您只需使用即可：
<meta name="viewport" content="width=device-width, initial-scale=1" />
在你的<head>,
我很难弄清楚如何表达这个。抱歉，如果这是一个菜鸟问题，我对响应式设计和移动网页设计一般来说是新手。
我的 phone (Galaxy s10e) 会将我的网页呈现为 360 像素宽，所有元素都根据此宽度适当定位。我在网站上有几个宽度相同的图像标签。我 是 使用 360 像素宽的 src 图像，这在桌面上看起来不错，因为它实际上以 360 像素渲染我的图像，但在移动设备上，单独的图像似乎以更高的分辨率渲染分辨率，导致它由于放大而看起来很糟糕。
如果有人可以向我解释这里发生的事情，那将非常有帮助，因为我找不到有关此特定行为的信息。我有一些问题：
- 在以屏幕分辨率呈现实际内容时，浏览器是否选择[=18=]定位基于 360 像素宽度的元素？
- 如何在我的设计中考虑到这一点？我考虑过以更高分辨率渲染图像，然后让页面动态缩小这些图像（因此即使实际 div 是 360px，浏览器也可以使用 max-width 分配的 'extra space' 来渲染图像分辨率更高），但我希望图像在桌面上保持 360 像素宽，而不是移动渲染的更高最大宽度。
- 我在哪里可以了解有关此行为的所有信息，以便我知道将来如何处理响应式图像缩放？
感谢您的宝贵时间。如果您有任何其他问题，请告诉我。我正在使用 ReactJS 开发网站。
好吧，简而言之，像素是相对大小。 phone.
上的一个像素并不是字面上的一个像素发生的事情是 PPI 启动并基本上放大以使内容可读。
因为如果您真的尝试在具有该像素密度的 phone 上查看 360 像素，您实际上什么也看不到。
所以让我们看看一些 phone 规格：
6.1 英寸
5.90 x 2.77 x 0.31 英寸
分辨率 1440 x 3040 像素~每英寸 550 像素
视口 360 x 760 PX 每英寸 138 像素
现在视口就是您在屏幕上实际看到的内容。在这种情况下，它给你的像素比大约为 4。这意味着你的 phone 的分辨率是视口的 4 倍。
所以对于一个 div 设置为 200px 宽的网络应用程序，它会根据视口显示 200px，但这个 div 实际上是 800px 宽相对于你的phones 分辨率。
现在图片不需要这个限制了。如果您的图片仅显示 200 像素且像素密度是屏幕容量的四分之一，那么高分辨率显示有什么意义。
因此，图片在您的 phone 上存在于双重现实中。它有一个框大小，即图像相对于视口的大小，但框内的图像本身在相对于设备总屏幕像素的分辨率范围内。
因此，当您在视口中拥有 200 像素的图像时，其显示分辨率实际上是 800 像素。因此，当您将一张只有 200 像素的图片放在屏幕上时，视口缩放现在几乎是所有内容，您实际上是在将该图像拉伸到其实际大小的四倍。或者屏幕像素密度与视口的比率是多少。 AKA 它看起来像废话。
为了回答您的需求，我将引导您前往 MOZ，MOZ 将详细介绍原因和方法，并向您展示如何解决这个问题。
打击元素位置非常简单，您只需使用即可：
<meta name="viewport" content="width=device-width, initial-scale=1" />
在你的<head>,