与Safari Safari相比,iOS Safari上的网站看起来有所不同;铬; Mozilla的

时间:2015-06-05 18:48:15

标签: ios html5 css3 mobile safari

我正在努力展示一个带有内联css的非常简单的网站。它远远不是最前沿,在桌面上呈现OK,但是一旦在iOS上的Safari中查看,文本将在容器元素之外,并且我在右侧有一个空白空间。

我的目标是它只是适应显示分辨率并允许垂直滚动。我已经尝试了几个视口组合和CSS文本换行选项椭圆等没有改变...也许我太愚蠢,看到我犯的错误...继承人html:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>xx xxxxxxxxxxxxx</title>
<style>
    html { 
  background-color:#434c53;
}

/* unvisited link */
a:link {
    color: #777777;
    text-decoration: none;
}

/* visited link */
a:visited {
    color: #777777;
    text-decoration: none;
}

/* mouse over link */
a:hover {
    color: #0071CE;
    text-decoration: none;
}

/* selected link */
a:active {
    color: #0071CE;
    text-decoration: none;
}

@font-face {
    font-family: 'Conv_Calibri';
    src: url('fonts/Calibri.eot');
    src: local('☺'), url('fonts/Calibri.woff') format('woff'), url('fonts/Calibri.ttf') format('truetype'), url('fonts/Calibri.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

#Wrapper {
    max-width: 1280px;
    min-width: 960px;
    min-height: 960px;
    max-height: 1280;
    background-color: #E7E9EA;
    margin: 0 auto;
    opacity: 0.93;
}

header {
    height:240px;
    background-color: #E7E9EA;
}

#MainNav {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    background-color:#E7E9EA;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    padding-top: 36px;
    font-family:'Conv_Calibri',Sans-Serif;
    font-size: 100%;

}
#Content {
    display: -webkit-flex;
    display: flex;
    padding: 80px;
    max-width: 1280px;
    min-width:960px;
    font-family:'Conv_Calibri',Sans-Serif;
    font-size: 160%;
}

#footer {
    display: -webkit-flex;
    display: flex;
    max-width: 1280px;
    min-width:960px;
    margin: 0 auto;
    background-color: #E7E9EA;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    font-family:'Conv_Calibri',Sans-Serif;
    color:#777777;
    font-size: 100%;


}



</style>

</head>

<body>



<div id="Wrapper" >

    <header>
        <nav id="MainNav">
            <img src="dp_logo.svg" width="240" height="auto"
            </img>
            <a href="index.html">Home</a>
            <a href="about_us.html">Über uns</a>
            <a href="solutions.html">Lösungen</a>
            <a href="contact.html">Kontakt</a>
        </nav>
    </header>
    <div id="Content" >

        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,</p>



</div>



</div>       
    <div id="footer">
        <section> 
    <p>

© xxx xxxxxxxxx xxxxxx  
</p>
        </section>

        <section>
            <p>
             xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
            </p>
        </section>

        <section>
            <p>
            <a href="impressum.html">Impressum</a>
            </p>
        </section>        

    </div>    
</body>
</html>

我犯了什么错误?

0 个答案:

没有答案