三星 Galaxy S III Mini 的响应式设计

Question

我正忙于使现有网站具有响应性，目前我只使其响应一种解决方案，以便我的销售经理可以向客户“推销”响应性网站的想法。我遇到了一个问题，我被分配了 480 像素 x 800 像素的屏幕尺寸，这是三星 Galaxy S III Mini 的屏幕尺寸。

在我的计算机上使用 Firefox 或其他各种在线工具中的响应式设计视图测试响应式设计时，它运行良好。但是，当我在手机上对其进行测试时，它会显示正确的响应式设计，但不会填满屏幕的宽度。换句话说，屏幕宽度是 480 像素，但页面上实际上并没有填充 480 像素，它只覆盖了大约一半的屏幕宽度，并且在右侧留下了空白区域。

这是我正在使用的媒体查询：

@media only screen and (max-width : 480px),
only screen and (max-device-width : 480px){

这是否与像素密度有关或导致此问题的原因？

提前致谢
亲切的问候
威廉

Answer 1

<meta name="viewport"> 

你看过这个标签吗？这会改变布局在移动浏览器上的缩放方式。你可以看看我在这里找到了什么：https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag。此示例显示了您似乎遇到的问题。据我所知，“viewport”标签适用于所有移动浏览器，但如果这对您没有帮助，您应该检查手机上的不同浏览器。

Answer 2

当所有宽度都正常工作时，我遇到了相同的右侧白色问题，并通过如下方式关闭 CSS 中的溢出来解决它...这可能会隐藏实际内容，因此您必须根据您的情况/布局进行测试。 ..

html { overflow-x: hidden; }