移动网站忽略 meta=viewport 并且是 zooming-in 任何缩略图或内容

Question

似乎我作为元数据添加的所有内容都适用于该网站的移动版本，它实际上被忽略了，并且 full-zoomed（当我在移动设备上访问我的网站时）与我所拥有的实际大小相符在 CSS。

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

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

header 似乎没问题，并且在移动设备上的缩放比例很好，但其他一切都是 zoomed-in。

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

此外，当网站在移动设备上加载时，实际的 meta=viewport 有效，这意味着如果我在移动设备上设置为 320 像素，则缩略图会正常显示，但是当网站完全加载时，流浪汉..回到我在 css!

中的 728px

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

Answer 1

建立了许多响应式网站后，我必须声明，如果您的内容比手机屏幕宽（在本例中为 320 像素，仅 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' />

确保您的内容实际缩小到 phone 的屏幕尺寸。这将产生重大影响。我个人也建议您习惯使用 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;
}

移动网站忽略 meta=viewport 并且是 zooming-in 任何缩略图或内容

Mobile Site ignores meta=viewport and is zooming-in any thumb or content

css

mobile

web

viewport

meta