Css 移动站点忽略meta=viewport，并放大任何缩略图或内容

似乎我为网站的移动版添加的所有元数据都被忽略了，并且（当我在手机上访问我的网站时）完全缩放到CSS中的实际大小

>  I tried :
>  <meta name="viewport" content="width=device-width,> initial-scale=1, maximum-scale=1"> & 
>  <meta name="viewport"> content="width=device-width">

>我试过：
>   & 
>content=“width=设备宽度”>

事实上，我完全去掉了那条线，希望它不会变大，但它仍然放大

标题看起来不错，在手机上的缩放效果很好，但其他所有内容都放大了

示例：thumb在css中是728x410，但是，无论是否使用移动元视口，它在移动设备上仍然具有相同的大小，这使得它非常巨大

另外，当网站在手机上加载时，实际的meta=viewport工作，这意味着如果我在手机上设置了320像素，拇指确实会显示出来，但当网站完全加载时，bum。。回到728px，我有在css

有人知道怎么解决这个问题吗？

---

谢谢

我已经建立了许多响应迅速的网站，我必须声明，如果你的内容比手机屏幕宽（在本例中是320px，仅限Iphone？），它会把一切都搞糟。 要解决这个问题，请确保在内容周围有一些主包装，如

标题

、

内容

和

页脚

div。 在移动设备上为这些div提供以下css规则：

@media screen and (max-device-width: 480px) {
  .header,.content,.footer{
    display:block;
    position: relative /*for absolute positioning or to get them behind
                         pop-ups with z-index
                         this also prevents absolute-position elements being outside
                         the parent element from stretching the view*/
    width:100%;
    overflow:hidden;
  }
}

以上内容应该可以防止任何事情扰乱您的缩放。从那里，您可以看到哪些元素不适合，并相应地设置它们的样式

此外，如果要禁止缩放，必须输入

user scalable=0

，如下所示：

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=0' name='viewport' />

---

你好，谢谢你的回答！您的视口实际上与我在帖子中所说的相同，这意味着在实际加载时，所有的拇指、文本等都可以，但加载完成后，它会恢复到完整的CSS大小。我很确定CSS中的某些东西可以做到这一点！我认为这就是问题的原因。videoListItem.thumb{position:relative；height:410px；overflow:hidden；background color:black；}.videoListItem.thumb img{position:absolute；top:-68px；left:0；}您好！为了验证这一点，您能否给出以下css规则：

宽度：100%；溢出：隐藏？它应该给你一个有效的测试结果，然后我们可以深入研究这个问题。如果你有一个网站的实例，那就太完美了。这显然是一个CSS问题，而不是元标记问题。我们从这里看不到你的CSS。还是一样！啊!！所以它似乎不是来自。实际上，它来自很多东西。我把它修好了，有点。。。30秒后。您有许多元素太宽。找他们！对于静态宽度为728的
#leftColumn
，您没有特定的移动css规则。与
#maincainer
相同，其静态宽度为1074px。你的元标签也错了。你应该用我刚给你的那个。然后是
.videoListItem.thumb.playcon
。要使其动态居中，只需将其置于“左：50%，margin-left-100px”/*将此宽度设为按钮自身宽度的一半*/。看来你有很多事要做。我无法为您构建所有css。我已使用所有css更改更新了我的答案，以获得包含在答案中的结果。这能让事情变得更清楚吗？
#headerContent {
    width: 100%;
    height: 40px;
    margin: 0 auto;
}

#mainContainer {
    width: 100%;
    margin: 0 auto;
}
.videoListItem .thumb img {
    position: absolute;
    width: 100%!important;
    overflow: hidden;
    top: -68px;
    left: 0;
}

#leftColumn {
    float: left;
    width: 100%;
}

.videoListItem .thumb .playIcon {
    background: url(./images/play_icon.png) no-repeat 0 0;
    top: 50%;
    left: 50%;
    width: 86px;
    height: 60px;
    position: absolute;
    margin-top: -30px;
    margin-left: -43px;
}