移动响应CSS-不以iPhone为中心

Question

我正在尝试创建一个移动响应网站。在笔记本电脑上的网站上，它看起来很棒，所有的卡/导航条等都居中。

但在我的手机上，一切都不集中。一切都从左边开始。它一开始看起来居中，然后如果你向右滚动，就会看到一些背景图像仍然在那里。卡片也稍微向右移动，而不是居中。

但同样，这种情况只发生在电话上。我用iphone在Safari中。

有什么建议吗？

我的html在标题中有这个：

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

css：

body {
background-image: url('../../static/capstone/island.jpeg');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #FFFAFA;
}
.navbar1 {
grid-auto-flow: column;
position: relative;
min-height: 100px;
margin-bottom: 80px;
opacity: 0.75;
padding-top: 1rem;
padding-bottom: 1rem;
box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
transition: 0.4s; 
}
.navbar {
background-color: #FFFFFF;
opacity: 0.75;
margin-top: 120px;
position: relative;
-ms-flex-pack:justify;
padding-top: 1rem;
padding-bottom: 1rem;
box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
transition: 0.4s; 
}
.navbar > .container {
position: relative;
display: flex;
flex-wrap: nowrap;
-ms-flex-align: center;
align-items: center;
}

.card {
background-color: #FFFFFF;
opacity: 0.75;
justify-content: center;
border-radius: 1em;
padding: 1em;
}
.card {
margin: 40px auto;
border-radius: 20px;
width: 400px;
height: 200px;
box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
transition: 0.4s;
}
.nav_text {
display: flex;
flex-wrap: wrap;
flex-basis: 100%;
text-align: center;
border-radius: 20px 20px 20px 20px;
font-family: sans-serif;
font-size: 20px;
padding-left: 20%;
padding-right: 20%;
margin-top: 10px;
height: 50px;
}
.card .card_title {
text-align: center;
border-radius: 0px 0px 10px 10px;
font-family: sans-serif;
font-weight: bold;
font-size: 25px;
margin-top: -30px;
height: 40px;
}
.card_text {
text-align: center;
border-radius: 0px 0px 10px 10px;
font-family: sans-serif;
font-weight: bold;
font-size: 20px;
margin-top: 10px;
height: 50px;
flex-direction:column;
flex-wrap: wrap;
padding: 30px;
}

.title-black {
color: black;
text-align: center;
}
.container {
text-align: center;
padding-left: 50px;
padding-right: 50px;
}

.form-control {
background-color: #d3d3d3;
width: 83%;
margin:0 auto;
justify-content: center;
align-items: center;
text-align: center;
outline: transparent;
border: transparent;
padding: 7%;
display: flex;
border-radius: 15px;
margin: 0.25rem;
padding: 1.5rem;
font-size: 20px;
box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9),
-0.2rem -0.2rem 0.4rem #f0f2f5;
}

.submit {
border-radius: 12%;
color: Black;
box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9),
-0.2rem -0.2rem 0.4rem #f0f2f5;
width: 100px;
height: 25px;
cursor: pointer;
}


@media all and (max-width: 100%) {
.card-list {
flex-direction: column;
}
}

Answer 1

尝试添加这段代码

list-style-type: none;
margin: 0;
display: inline-block;
-webkit-padding-start: 0;

我把它贴在这里是因为它很长时间来评论

Answer 2

尝试下面的代码，而不是您当前的代码，并将其替换为

主体｛

background-image: url('../../static/capstone/island.jpeg');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #FFFAFA;
}
.navbar1 {
grid-auto-flow: column;
position: relative;
min-height: 100px;
margin-bottom: 80px;
opacity: 0.75;
padding-top: 1rem;
padding-bottom: 1rem;
-webkit-box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s; 
}
.navbar {
background-color: #FFFFFF;
opacity: 0.75;
margin-top: 120px;
position: relative;
-ms-flex-pack:justify;
padding-top: 1rem;
padding-bottom: 1rem;
-webkit-box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s; 
}
.navbar > .container {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
}

.card {
background-color: #FFFFFF;
opacity: 0.75;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 1em;
padding: 1em;
}
.card {
margin: 40px auto;
border-radius: 20px;
width: 400px;
height: 200px;
-webkit-box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
.nav_text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
text-align: center;
border-radius: 20px 20px 20px 20px;
font-family: sans-serif;
font-size: 20px;
padding-left: 20%;
padding-right: 20%;
margin-top: 10px;
height: 50px;
}
.card .card_title {
text-align: center;
border-radius: 0px 0px 10px 10px;
font-family: sans-serif;
font-weight: bold;
font-size: 25px;
margin-top: -30px;
height: 40px;
}
.card_text {
text-align: center;
border-radius: 0px 0px 10px 10px;
font-family: sans-serif;
font-weight: bold;
font-size: 20px;
margin-top: 10px;
height: 50px;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 30px;
}

.title-black {
color: black;
text-align: center;
}
.container {
text-align: center;
padding-left: 50px;
padding-right: 50px;
}

.form-control {
background-color: #d3d3d3;
width: 83%;
margin:0 auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
outline: transparent;
border: transparent;
padding: 7%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 15px;
margin: 0.25rem;
padding: 1.5rem;
font-size: 20px;
-webkit-box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9),
-0.2rem -0.2rem 0.4rem #f0f2f5;
box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9),
-0.2rem -0.2rem 0.4rem #f0f2f5;
}

.submit {
border-radius: 12%;
color: Black;
-webkit-box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9),
-0.2rem -0.2rem 0.4rem #f0f2f5;
box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9),
-0.2rem -0.2rem 0.4rem #f0f2f5;
width: 100px;
height: 25px;
cursor: pointer;
}


@media all and (max-width: 100%) {
.card-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}

Answer 3

感谢所有提供帮助的人-我发现我在一些卡片和其他物品中使用了宽度，而且宽度太大了。所以当我把它改为最大宽度：345px；或者任何更小的东西，一切都开始变得更好，更容易使用。