Html 仅1个Div在移动应用中不是100%

因此，我在一个手机上工作，“给我发电子邮件”并没有像在屏幕上看到的那样在整个屏幕上扩展

我用数字、百分比、文本值摆弄过内容宽度、设备宽度等，但没有任何东西能让这个页面变得完美。我把代码重写得更干净了，但仍然找不到我的错误。这只是我忽略的东西吗

您可以查看我的源代码来获取我的代码，因为CSS应该在那里

---

更新：我删除了导航填充并更改了所有设备宽度值，但现在导航栏没有完全覆盖。我很困惑，因为“导航”和“mobilecontact”基本上应该具有相同的宽度。我正在iPhone上使用Safari。

你能添加你正在测试的浏览器和版本吗，因为在最新的chrome-developer工具中，“给我发电子邮件”按钮对我来说很合适（占据整个宽度）

可能是您的浏览器不理解100vw

如果你关心“给我发电子邮件”锚文本的可点击区域。

---

您可以将锚点设置为

显示：block

，这样它就占据了整行我认为您使用的是mac safari浏览器，在safari浏览器中不支持“vw”，因此现在您可以使用“px”或“%”按钮，按钮将被展开。

因此我已设法实现了所需的结果。 基本上，您在

上添加的额外填充（左填充：350px）是问题的一部分

此外，您还错误地使用了

设备宽度

属性值。不能使用

width=devicewidth指定html元素的宽度。宽度属性不接受设备宽度作为可接受的值。
因此，将其替换为
width=100%或<代码>宽度=100vw无处不在您已经使用过它。有关使用响应式web设计的文档，请参见此处

通过做这些更改，我可以让按钮占据100%的屏幕宽度

从
中删除
左侧填充：350px

对于媒体中的
和
查询
最大宽度：500px
，将宽度从
宽度：设备宽度更改为
100%
或
100vw

这是输出。如果成功了，请告诉我

我查过了。。您需要修复以下问题

首先，您应该从元中删除“width=500”，如下图所示
在CSS中添加以下内容以修复填充

*{
框大小：边框框；

}

不要使用
width:devicewidth
而使用
width:100%
并在#title中添加更多属性。见图片
将
#关于、#经验、#技能的CSS更新为
宽度：100%

就这样，你们都完了

这是最终结果


当你想要有一个响应性强的设计时，你所需要做的就是调整字体大小；块级元素不需要使用特定的
宽度

只是
从
身体的子项中删除
数字
宽度
，然后添加

body,html
{ 
    width:100%;
     box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
 }

然后，如果要为视口元素设置填充或边距；标准的方法只是一个具有特定类句柄宽度的元素，比如
引导容器类
您可以添加您正在测试的浏览器和版本吗，因为在最新的chrome-developer工具中，Email me按钮对我来说很合适。我删除了导航填充并更改了所有的设备宽度值，但现在导航栏没有完全穿过。我很困惑，因为“导航”和“mobilecontact”基本上应该具有相同的宽度。我正在iPhone上使用Safari。嗨，莉莉。因此，我注意到
#mobilecontact
div的每一面都有
填充：40px
，这实际上将内容推到了预期的100%宽度之外。因此，通过应用
padding left:40px，您可以将
#navigation
div设置为相同的宽度和
右侧填充：40px。或者只需将其中一个设置为80px，即，
padding right:80px或
左填充：80px。这将使它们具有相同的宽度。如果还有其他问题，请告诉我。请标记为正确答案，如果这对您有帮助，请向上投票。谢谢。我删除了导航填充并更改了所有设备宽度值，但现在导航栏没有完全穿过。删除meta标记中的width=500会使页面有所不同，但不会更好/更差。我很困惑，因为“导航”和“mobilecontact”基本上应该具有相同的宽度。我在iPhone上使用Safari。你需要使用宽度：100%；对于要在整个屏幕上显示的所有元素。如果仍不工作，请使用显示：块；也