0

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

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

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

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

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

提前致谢
问候
威廉

4

2 回答 2

0 
<meta name="viewport">

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

于 2013-09-30T11:53:26.480 回答
0

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

html { overflow-x: hidden; }
于 2014-07-01T02:01:01.410 回答