html - PC 和 Android 中的元视口(viewport)差异

Question

我开始使用 HTML5/CSS3 进行响应。我坚持一件事:我理解没有问题需要做些什么来加载 CSS 或使用媒体查询的其他解决方案。

我愿意:

<meta name="viewport" content="width=device-width, initial-scale=1, minim- 
scale=1 maximum-scale=1" /
<link href="estilosGranResolucion.css" rel="stylesheet" type="text/css" 
media="screen and (min-width: 700px)"/>

好吧，在 PC 的带有开发人员选项的 chrome 中，我看到了完美的效果，在窗口宽度为 700 像素时，纵横比发生了变化。好吧，如果我在 PC 移动模拟器(opera 移动模拟器)上尝试它，我发现它直到 1049 才发生变化。

如果我输入“min-width: 600px”，它不会改变最多 899 像素。 (在移动模拟器中)

如果我输入“min-width: 1000px”，它不会改变到 1499 像素。 (在移动模拟器中)

换句话说，看到的“偏移量”甚至不是恒定的。就好像你总是在我放的东西上加一个数量，但分辨率越高，你在改变之前添加的越多。

为什么它在移动模拟器中没有更改为应该更改的分辨率，而在 PC 中是？我也在普通手机上试过，结果是一样的。

事实是我坚持这一点。

---

它在 chrome pc 上运行良好，我可以看到在 700px 处更改了 Css。但不是在 Opera 模拟器移动版或真实手机中。

在移动运营商中，对 css 的更改在以下位置完成:

如果我输入“min-width: 700px”，它不会改变到 1049 像素。 (在移动模拟器中)

如果我输入“min-width: 600px”，它不会改变最多 899 像素。 (在移动模拟器中)

如果我输入“min-width: 1000px”，它不会改变到 1499 像素。 (在移动模拟器中)

这对我来说很奇怪，但这是我的第一个响应式设计。

谢谢。

还有一个问题，如果我使用模拟器它可以工作，如果我将模拟器水平放​​置，我可以看到设计更改为响应式，但在真正的移动设备中它不会改变!。模拟器是全高清的，就像真正的手机一样。

网络是:

instituto-torreblanca.000webhostapp.com

菜单在具体分辨率下从垂直变为水平，但它不适用于真正的移动全高清。

编辑::::::::::::::::::::::::::::::::::::::::::::::

抱歉，我现在看到代码必须有 4 个空格。现在你可以看到代码了。并在第一篇文章中修复。

<meta name="viewport" content="width=device-width, height = device-height, 
target-densitydpi=device-dpi, user-scalable=no, initial-scale=1, minim- 
scale=1 maximum-scale=1" />



<link href="estilosGranResolucion.css" rel="stylesheet" type="text/css" 
media="screen and (min-width: 1000px)"/>
<link href="estilosMedianaResolucion.css" rel="stylesheet" type="text/css" 
media="screen and (min-width: 300px) and (max-width: 999px)"/>

它在 chrome pc 上运行良好，我可以看到在 700px 处更改了 Css。但不是在 Opera 模拟器移动版或真实手机中。

在移动运营商中，对 css 的更改在以下位置完成:

如果我输入“min-width: 700px”，它不会改变到 1049 像素。 (在移动模拟器中)

如果我输入“min-width: 600px”，它不会改变最多 899 像素。 (在移动模拟器中)

如果我输入“min-width: 1000px”，它不会改变到 1499 像素。 (在移动模拟器中)

这对我来说很奇怪，但这是我的第一个响应式设计。

谢谢。

还有一个问题，如果我使用模拟器它可以工作，如果我把模拟器放在水平方向，我可以看到设计更改为响应式，但在真正的移动设备中它不会改变!。而且模拟器是全高清的，就像真正的手机一样。

网络是:

instituto-torreblanca.000webhostapp.com

菜单在具体分辨率下从垂直变为水平，但它不适用于真正的移动全高清。

编辑:::::::::::::::::::::::::::::::::::::::::.

如果真实手机中的浏览器是否带有“桌面”选项，我可以看到功能有何不同。 width=device-width 在每种模式下的工作方式不同。

我不知道该怎么办。

在大量测试之前，我可以看到元标记中的 1 个移动像素不是 1 个像素。

Answer 1

尝试在末尾添加初始比例，您可能需要稍微调整一下数字。例如>

您也可以尝试最小比例和/或最大比例。

它也可能是您正在使用的设备。