Question

因此，当我在几乎所有移动设备上查看网站时遇到问题时，我正在从事一个Web项目。问题是，当您第一次进入页面时，页面的整个宽度将不会显示，只会显示一小部分。我正在寻找一种解决方案，以解决此问题，而无需更改我的所有代码或实施诸如引导程序的框架。

如果您想亲自了解问题，则域为the-salon.uk。

谢谢。

哈里森

Answer 1

您可以通过在meta视口标记中明确指定宽度来进行修饰，例如：

<meta name="viewport" content="width=1000px, initial-scale=1.0">

非常清楚，这不会带来出色的用户体验。实际上，这很糟糕，但是它将所有内容保留在页面上。用户将不得不捏缩放以使用任何东西。

就像评论所说的那样，您应该研究响应式设计。 SO回答的主题确实太广泛了，但是它涉及结合使用基于百分比的/灵活的项目和css media-queries（查找它）以在特定屏幕宽度下更改页面的布局。

希望有所帮助！由于您的网站已经启用，因此我将对meta-viewport进行更改作为一个热修复程序，然后进行学习如何使其具有响应能力的过程。我绝对不主张长期使用该视口技巧。

Answer 2

如果您希望所有内容都适合屏幕，我强烈建议您使用百分比而不是像素。我建议不要使用宽度：400px，

width: 100%

这可确保无论您在哪个设备上运行，该块都占一定比例。

我看不到您的源代码，因此无法提供任何具体反馈。希望这会有所帮助！

Answer 3

只需添加

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在<html>标记之后。这样可以确保您的网站覆盖了设备的视口。

Answer 4

奇怪的是您将宽度设置为绝对值，如果您在CSS中设置宽度，我会更改此值：

width:{Amount}px

更像这样

width:{Amount}%

这种类型的声明是一个相对值，表示它随浏览器的大小或其他元素的位置/大小而变化。如果不调整大小，则很有可能将其设置为绝对值（使用px关键字）。This might be useful for you

编辑

糟糕，当我在输入RIP GG Knightsoul时，有人说了确切的话

Answer 5

添加此代码将解决您的问题。

   @media (max-width: 520px) {
     .menu { width: 100%;}
     .menu li {
        float: none
        height: 32px;
        width: auto;
        padding: 0px 6px;
    }
    #greeting {
        padding-right: 25px;
        padding-left: 25px;
    }
    #banner {
        background-repeat: no-repeat;
        width: 100%;
        height: 200px;
        max-width: 800px;
        background-size: contain;
        background-position: center;
        background-image: url(/Images/home_background.jpeg);
    }
    }

Answer 6

*{
  box-sizing: border-box;
}

body{
  height:100%;
  width:100%;
  margin:0;
}

<meta name="viewport" content ="width=device-width,initial-scale=1,user-scalable=yes" />

尝试一下。

希望这会有所帮助。

CSS网站适合设备的宽度

6 个答案: