在iphone上，页脚不会延伸到100%宽度，为什么？_Iphone_Html_Css_Mobile Safari_Responsive Design

在iphone上，页脚不会延伸到100%宽度，为什么？

iphone html css responsive-design

在iphone上，页脚不会延伸到100%宽度，为什么？,iphone,html,css,mobile-safari,responsive-design,Iphone,Html,Css,Mobile Safari,Responsive Design,我几乎完成了这个网站，但有一个问题。在iPhone（可能还有其他移动设备）上，页脚从右下角剪短，留下空白，尽管我已经将页脚设置为最小宽度：100%。我不确定是什么导致了这一点，并将感谢任何帮助这一点。你可以访问这个网站我已经将下面的HTML分解为要点 <body> <div class="content"> <header> <img /> </header> <img />

我几乎完成了这个网站，但有一个问题。在iPhone（可能还有其他移动设备）上，页脚从右下角剪短，留下空白，尽管我已经将页脚设置为最小宽度：100%。我不确定是什么导致了这一点，并将感谢任何帮助这一点。你可以访问这个网站

我已经将下面的HTML分解为要点

<body>

<div class="content">

    <header>
        <img /> 
    </header>

    <img />
    <h3>Title</h3><br>
    <p>
        Paragraph
    </p>
    <div class="push"></div>

</div>

<div id="footer">
    <a href="page.html">
        <img />
    </a>
    <ul>
        <li>
            <h3>footer title</h3>
            <p><a href="page.html">footer Link</a></p>
        </li>
        <li>
            <h3>footer title</h3>
            <p><a href="page.html">footer Link</a></p>
        </li>
        <li>
            <h3>footer title</h3>
            <p><a href="page.html">footer Link</a></p>
        </li>
    </ul>
        <p>copyright text<a href="page.html">link</a></p>
</div>

</body>

谢谢大家!

编辑：

好的，我已经按照建议在网站上添加了一个viewport元标记。然而，这让我更加困惑。网站不再按屏幕比例显示，它现在的显示方式过于放大，页脚现在是一个小正方形，在左下角呜咽。我添加了如下视口元标记

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>

你可以现场观看我是不是写错了？错误的价值观

编辑2：我还想指出，主体正在延伸到视口的全宽，您可以在这里看到：

我把身体的背景颜色改成灰色，所以你可以看到只是脚的行为不正常！我相信body标签和div标签在这方面的行为是相同的，但它们不是？

使用viewport meta标签使您的网站支持移动浏览器

以下是关于这一点的精彩描述：

&下面是关于github的一个很好的讨论（必须阅读第五条评论）：

使用viewport meta标记使您的网站支持移动浏览器

以下是关于这一点的精彩描述：

&下面是关于github的一个很好的讨论（必须阅读第五条评论）：

我不确定它在多大程度上是正确的，但是我在我的网站上给出了这条元线，我解决了这个问题：

<meta name="viewport" content="width=320, initial-scale=0.29">

宽度是iPhone的大小（水平）。

最初的比例是真实尺寸（1100px）和iPhone尺寸（320px）之间的比率。

我不确定它的正确程度，但是我在我的网站上给出了这条元线，我解决了这个问题：

<meta name="viewport" content="width=320, initial-scale=0.29">

宽度是iPhone的大小（水平）。

初始比例是实际大小（1100px）和iPhone大小（320px）之间的比率。

阅读此内容并将其添加到您的网站@SVS。您应该将此评论移至答案。为什么图像标签中没有必需的属性？在移动视图中，您的图像似乎将页面大小扩展到100%以上。如果你将图像设置为一个百分比，这样它就不会超出你的屏幕，这应该可以解决你的问题。对不起，你说的是什么图像？这是页脚中的图像吗？请阅读并将其添加到您的网站@SVS。您应该将此评论移至答案。为什么图像标签中没有必需的属性？在移动视图中，您的图像似乎正在将页面大小扩展到100%以上。如果你将图像设置为一个百分比，这样它就不会超出你的屏幕，这应该可以解决你的问题。对不起，你说的是什么图像？是页脚中的图像吗？嗯，似乎给我带来了更多的困惑，请参见上面的编辑。@BestFriendsForver Ohh！！我检查了你的网站css，没有特定于设备的css，那么这个meta viewpost有什么用。如果你只想在所有浏览器中显示相同的网站布局，那么它就会发生。尝试调整浏览器的大小并向右拖动水平滚动条，然后页脚也将被剪裁。使用媒体查询使您的网站响应。感谢SVS，我认为您的评论是我一直在寻找的答案，解决这个问题的方法比我原来认为的要复杂得多。再次感谢。嗯，似乎给我带来了更多的困惑，请参见上面的编辑。@BestFriendsForver Ohh！！我检查了你的网站css，没有特定于设备的css，那么这个meta viewpost有什么用。如果你只想在所有浏览器中显示相同的网站布局，那么它就会发生。尝试调整浏览器的大小并向右拖动水平滚动条，然后页脚也将被剪裁。使用媒体查询使您的网站响应。感谢SVS，我认为您的评论是我一直在寻找的答案，解决这个问题的方法比我原来认为的要复杂得多。再次感谢。