Question

我有一个网站给我带来了很大的麻烦，网站不适合屏幕的宽度。我尝试更改视口元标记，但似乎没有任何工作正常。我在下面的链接中添加了一个屏幕截图。您可以在iPhone的右侧看到巨大的余量。我很难过，感谢任何帮助！

Answer 1

您还没有发布任何代码供我们查看，但您应该有一个＆＃34;包装＆＃34;包含所有其他内容的元素。该包装器，如果是div，则会延伸到视口宽度的100％。包装器中的子元素也需要响应。

Answer 2

我从你的屏幕截图中获取了URL。在＆＃34; Group Fitness＆＃34;您有一个宽度为649px

的嵌入图像的部分

<img style="width: 649px;" src="<massive data removed...>" data-filename="IMG_3105.JPG">

您应该从该img标记中删除该样式，或将其设置为％。

Answer 3

感谢先前的回答，我查看了您的实时网站源代码。在重复 次创建错误之后。

<h2>
    <span style="font-weight: normal;">
        <span>INSANITY LIVE<br>
            <font color="#efefef" style="background-color: inherit;">Monday&nbsp;6:00pm</font>
        </span>
        <font color="#efefef" style="background-color: inherit;">   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br>
      Wednesday 6:00am
        </font>
    </span>
</h2>

如果这些额外的字符是动态的，那么@media的快速修复就是

font[style^=background] { display: inline-block;}

如何让这个响应式网站在整个屏幕上延伸？

3 个答案: