Question

我正在搜索我的代码中的错误。我使用了html5 doctype，带有viewport元标记和简单的Html构造。

<!doctype html>
    <html>
        <head>
        <meta charset="utf-8">
        <title>Page title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

主要内容div一些链接和段落。你可以看到我所有的html和css here。我的Html（简短版）：

<div class="main-content">
  <a href="">
    <img src="http://dummyimage.com/980x64/000/fff" alt="" />
  </a><!-- there many others-->
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae autem in repudiandae voluptas dolorem veritatis aliquam deserunt fuga tempore perferendis quaerat est hic deleniti porro commodi. Quisquam repudiandae rerum minus?</p>
  <a href="">
    <img src="http://dummyimage.com/980x74/000/fff" alt="" />
  </a>
</div>

Css：

html {
    font-size: 62.5%;
}

.main-content {
    -webkit-overflow-scrolling:touch;
    overflow:auto;
    margin: 0 auto;
    width: 100%;
}

a {
    display: block;
    text-decoration: none;
}

img {
    display: block;
    margin: 0;
    padding: 0;
    max-width: 100%;
}

p {
    font-family: arial, sans-serif;
    font-size: 13px;
    font-size:1.3rem;
    color:#7b7b7b;
    margin: 10px;
    text-align:justify;
}

@media (min-width: 48em) {

    p {
        font-size: 14px;
        font-size: 1.4rem;
    }
}

@media (min-width: 75em) {
    .main-table { width: 980px; }

    p {
        font-size: 12px;
        font-size: 1.2rem;
    }
}

我的问题是我的页面在IOS设备（iphone 5和ipad mini测试）以外的任何地方都能很好地工作。页面内容被剪切，不要滚动。

内容不会在Iphone＆amp; amp; Ipad的

0 个答案: