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;。这意味着向取消元素的任何元素添加任何填充或边框，而不是添加到元素。

示例：您的屏幕宽度为320px。你有一个<div width="320"></div>，宽度是320px。向其添加padding:20px会使360px宽（20px填充到两边）

但是，使用box-sizing:border-box会确保它保持在320px（与100％宽度相同），相反，内容将适合剩余的280px。只是一个提示。

另外：您在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;
}

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

1 个答案: