Javascript 当我在移动it上启动网站时'；s放大了，我必须用手指缩小

我正在和网站斗争。 当我在桌面上启动时，一切正常，但当我在移动设备上启动时，它会放大。

我想让它在手机上以如下方式完全缩小：

我试图在index.html中操纵“元视口”，但没有成功。 是否可以在styles.css中通过@media进行设置

---

github:

视口元没问题，您可以添加其他选项，但没有任何解决问题的方法。主要问题是，如果您的内容没有得到适当的约束，那么调整

viewport

标记对您没有多大帮助

让我们从顶部开始--您在

主要组件

元素上设置了一个固定的宽度--如果您只是想在更大的屏幕上限制内容，那么理想情况下，这应该是一个

最大宽度

，否则，在小屏幕上，该元素仍将为1280px宽，因此将延伸到可见视口之外，而不是环绕

使用绝对定位缩放图像的方式不是我个人推荐的方式，看起来有点奇怪——如果使用您的方法，我会简单地将图像设置为

display:block

，并在适当宽度的视口中包含

@media

查询，以将其调整为

位置：absolute

您还为网格项设置了固定宽度。如果不打算使用

@media

查询，则需要对

网格模板列

属性进行不同的配置，以获得响应性布局。例如，一个非常快速的替代方案是：

.grid-container {
  grid-template-columns: repeat(7, 1fr);
}

还有其他使用网格重复的方法，我建议您根据您想要实现的目标来使用它们。或者，考虑FLUBBOX或旧的网格系统，结合媒体查询。< /P> 您正在部署

grid

来对齐和包装实际表结构上方的几个选项，为此，我将坚持使用类似

inline block

的简单方法

.training-options {
  display: block;
  text-align: center;
  padding: 10px 10px 80px 10px; /* use padding instead of fixed heights */
}

.training-style1,.training-style2 {
  display: inline-block;
  text-align: center;
}

.training-style1 {
  /* padding-left: 350px; <- remove this */
}
.training-style2 {
  /* padding-right: 350px; <- and that */
}

最后，您有两个固定边距浮动的按钮——为了整理这一点，我建议切换到

display:inline block

.pump-container {
  display: block;
  text-align: center; /* <-- this will centralise the two buttons */
}
.super-pump, .super-endurance {
  display: inline-block;  
  padding: 5px 10px 0px;
}

。泵容器{
显示：块；
文本对齐：居中；/*尝试将主体类设置为100%。请发布您的css。您的元标记是正确的。您可以尝试使用此
将css放置在文件“styles.css”中吗在github上：@PiotrFranczak你有一个1280px的固定宽度用于
。主要组件
我已经设置了
，但它没有帮助。@kiranvj你建议把它改成%而不是px吗？这确实就像你说的@amdouglas。我的主要目标是为桌面创建这个网站，但一旦我在手机上运行它，我就想“哦，还不错，只需要缩小就行了。”现在，因为你给了我这个很棒的建议，我会努力让它更具响应性。我感谢你的帮助，伙计。祝你好运，玩得开心！
.pump-container {
  display: block;
  text-align: center; /* <-- this will centralise the two buttons */
}
.super-pump, .super-endurance {
  display: inline-block;  
  padding: 5px 10px 0px;
}