Html 内容不会在Iphone和Ipad上滚动_Html_Css_Iphone_Ipad_Mobile

Html 内容不会在Iphone和Ipad上滚动

html css iphone ipad mobile

Html 内容不会在Iphone和Ipad上滚动,html,css,iphone,ipad,mobile,Html,Css,Iphone,Ipad,Mobile,我正在搜索代码中的错误。我使用了html5 doctype，带有视口元标记和简单的Html构造 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Page title</title> <meta name="viewport" content="width=device-widt

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

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

Css:

我的问题是，除了IOS设备iphone 5和ipad mini测试之外，我的页面在任何地方都运行良好。页面内容被剪切且不滚动。

我无法测试它，因为我没有iPhone，但我在您的代码中看到的唯一可能导致问题的东西是-webkit溢出滚动：touch；。当你删除它时会发生什么？谢谢你的Ted，但是我没有这个属性，我有这个问题，我尝试了这个选项，但是没有任何改变。我找到了一个答案我的页面在一个iframe中，所以我找到了解决方案

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

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;
    }
}