为什么引导卡在计算机上与在iPad上显示的有所不同？

Question

我想知道是否有人可以向我提供解释，为什么我的网站上的卡片在iPad上与台式机上的显示方式不同。

我还添加了HTML文档的开头，以告知它具有iPad屏幕的宽度。

我还试图将显示样式更改为嵌入式块，但这不能解决我的问题。

任何帮助将不胜感激

Bootstrap website on iPad

Boostrap website on Desktop

body {
  font-family :Georgia;
  margin:auto;
  background: #009FFF;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ec2F4B, #009FFF);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ec2F4B, #009FFF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

article{
  text-align: center;
  padding: 15px;
}

.navContainer{
  background-color: #b3b3b3;
  padding-left: 8px;
}

.point {
  font-size: 30px;
  cursor: pointer;
}

.hideNav{
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  opacity: 0.9;
}

.hideNav a{
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.hideNav a:hover{
  color: #f1f1f1;
}

.hideNav .btnClose {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .hideNav{padding-top: 15px;}
  .hideNav a {font-size: 18px;}
}

.row{
 display: block;

  margin-left: 270px;
  width: 10%;

  
}

.card-block{
background-color: #3C3C3A;
overflow: hidden;
  
  

  border-style: hidden;
  

}
.card-title, .card-text{
  color:white;
}

.abouttitle{
  color: white;
}

Answer 1

移除宽度：10％；在.row类