css - 即使使用媒体查询，网站在智能手机上看起来也大不相同

Question

编辑:我设法调整了一个更好的结果，将视口(viewport)设置为 0.25。但我仍然遇到了一些可怕的事情。例如操作栏，它设置为 100%，并且它只占据屏幕的 70%。

我这里有一个大问题。

我正在开发一个网站，没什么大不了的。但我还必须让它响应智能手机。

好吧，我正在为此使用媒体查询，并使用窗口调整器来使用精确的宽度。

我也为 div 使用 % 值，当然不是高度，而是宽度。

当我在 chrome 上“模拟”时，布局工作正常，完全没有问题。

但是当我在 Galaxy S2 上进行测试时，看起来真的很矮胖。我不知道我能做些什么来使它完全相同。

http://www2.madeinweb.com.br/jobs/adc/prototype/html/

这是我现在正在 build 的家。正确的媒体查询是这个:

@media only screen and (min-width : 320px) and (max-width : 640px) {}

Answer 1

您是否尝试过添加 -webkit-min-device-pixel-ratio: 1.5 或 and (orientation : portrait)。您可以在此处找到有关移动像素密度的信息:http://bjango.com/articles/min-device-pixel-ratio/

在您的情况下，如果向下滚动，您将看到 Galaxy S2