移动网站忽略meta=viewport并放大任何拇指或内容

Question

似乎我作为元添加的所有内容都适用于该网站的移动版本，它实际上被忽略并完全缩放（当我在移动设备上访问我的网站时）到我在 CSS 中拥有的实际大小。

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

事实上，我完全取消了那条线，希望它不会缩放，但它仍然放大了！

标题似乎没问题，并且在移动设备上缩放得很好，但其他所有内容都放大了。

示例：拇指在 css 中为 728x410，但是，无论有或没有移动元视口，它在移动设备上仍然具有相同的大小，这使得它变得巨大！

此外，当网站在移动设备上加载时，实际的meta=viewport起作用，这意味着如果我在移动设备上设置为320像素，拇指确实会按应有的方式显示，但是当网站完全加载时，bum ..返回到我在 css 中的 728px！

有人知道如何解决这个问题吗？ 谢谢！

Answer 1

在构建了许多响应式网站之后，我必须指出，如果您的内容比移动屏幕宽（在本例中为 320px，仅限 Iphone？），它会让一切变得混乱。 要解决这个问题，请确保您的内容有一些主要包装，例如

header

、

content

和

footer

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' />

确保您的内容实际上缩小到手机屏幕尺寸。这将产生重大影响。我个人也建议您习惯使用

box-sizing:border-box;

。这意味着向任何元素添加任何填充或边框都是“从元素上取下”，而不是“添加到元素上”。 示例：您的屏幕宽 320 像素。你有一个 <div width="320"></div>，它的宽度为 320px。添加

padding:20px

到它，将使它

360px

宽（

20px

两侧填充）但是，使用

box-sizing:border-box

将确保其保持在

320px

（与 100% 宽度相同），并且内容将适合剩余的

280px

。 只是一个提示。还有：您在 CSS 文件中使用哪种媒体查询？

专门针对您的网站进行更新

我得到它是这样的： --出于隐私原因删除了 img --

这些是我所做的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;
}