iOS Safari上的网站与桌面Safari相比看起来有所不同；铬；Mozilla_Ios_Html_Css_Mobile_Safari

iOS Safari上的网站与桌面Safari相比看起来有所不同；铬；Mozilla

ios html css mobile safari

iOS Safari上的网站与桌面Safari相比看起来有所不同；铬；Mozilla,ios,html,css,mobile,safari,Ios,Html,Css,Mobile,Safari,我正在努力用内联css显示一个非常简单的网站。到目前为止，它还不是最先进的，在桌面上呈现OK，但一旦在iOS上的Safari中查看它，文本将在容器元素之外，我在右侧有一个空白我的目标是，它只是适应显示器的分辨率，并允许垂直滚动。到目前为止，我已经尝试了几个视口组合和css文本换行选项椭圆等。没有任何改变。。。也许我太蠢了以至于看不到我犯的错误。。。以下是html： <!doctype html> <html> <head> <meta charset=

我正在努力用内联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>


xx XXXXXXXXXXXX
html{
背景色：#434c53；
}
/*未访问链接*/
a:链接{
颜色：#777777；
文字装饰：无；
}
/*访问链接*/
a:参观了{
颜色：#777777；
文字装饰：无；
}
/*鼠标悬停链接*/
a:悬停{
颜色：#0071CE；
文字装饰：无；
}
/*选定链接*/
a:主动的{
颜色：#0071CE；
文字装饰：无；
}
@字体{
字体系列：“Conv_Calibri”；
src:url（'font/Calibri.eot'）；
src:local（'☺'), url（'fonts/Calibri.woff'）格式（'woff'）、url（'fonts/Calibri.ttf'）格式（'truetype'）、url（'fonts/Calibri.svg'）格式（'svg'）；
字体大小：正常；
字体风格：普通；
文字装饰：无；
}
#包装纸{
最大宽度：1280px；
最小宽度：960像素；
最小高度：960px；
最高高度：1280；
背景色：#E7E9EA；
保证金：0自动；
不透明度：0.93；
}
标题{
高度：240px；
背景色：#E7E9EA；
}
#主导航{
显示：-webkit flex；
显示器：flex；
-webkit对齐项目：居中；
对齐项目：居中；
背景色：#E7E9EA；
-webkit内容：周围的空间；
证明内容：周围的空间；
填充顶部：36px；
字体系列：'Conv_Calibri'，无衬线；
字体大小：100%；
}
#内容{
显示：-webkit flex；
显示器：flex；
填充：80px；
最大宽度：1280px；
最小宽度：960像素；
字体系列：'Conv_Calibri'，无衬线；
字体大小：160%；
}
#页脚{
显示：-webkit flex；
显示器：flex；
最大宽度：1280px；
最小宽度：960像素；
保证金：0自动；
背景色：#E7E9EA；
-webkit内容：周围的空间；
证明内容：周围的空间；
字体系列：'Conv_Calibri'，无衬线；
颜色：#777777；
字体大小：100%；
}
知识产权是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利Eliter，在vero eos et accusam et justo dolores et ea rebum.Stet clita kasd gubergren，没有海洋takimata sanctus est Lorem ipsum dolor sit amet。在vero eos et accusam et Just duo dolores et ea rebum，没有海洋保护区，也没有海洋保护区在这两个地方，没有海洋保护区，也没有海洋保护区。
在亨德雷特的两个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里

©XXXXXXXXXXXXXXXXXX


XXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

我犯了什么错误？

您的错误可能是在同时以手机和桌面为目标时没有使用媒体查询！？您尝试的视口在哪里？我在注意到没有差异后删除了它们。我使用了width=device-width。媒体查询是解决此问题的唯一方法吗？您的意思是我应该添加所有可用的iOS分辨率/s吗css的屏幕大小？