与Chrome的iPhone 5模拟器相比，iPhone 5上的网站显示方式不同

Question

我的单页webapp http://amillionmarbles.com在桌面上看起来不错。在Chrome中，当我模拟iPhone 5时，它看起来很不错。

在实际的iPhone 5s上，它看起来不太好。

[                                                                                                                                                                                                

</div>
</center>
</body>

的style.css

    .buttons {
    display: flex;
    flex-direction: column;
}

.game-display {
    display: flex;
    flex-direction: column;
}

.content {
    display: flex;
    flex-direction: row;
}

.button1 {
    background-image: url('logo.png');
    display: flex;
}

.button2-unselected {
    background:#34495e;
    background-image: url('redunselected.png'); 
}

.button3-unselected {
    background:#34495e;
    background-image: url('blueunselected.png');    
}

.button4-unselected {
    background:#34495e;
    background-image: url('greenunselected.png');   
}

.button2-selected {
    background:#9b59b6;
    background-image: url('red.png');   
}

.button3-selected {
    background:#9b59b6;
    background-image: url('blue.png');  
}

.button4-selected {
    background:#9b59b6;
    background-image: url('green.png'); 
}

.button-more {
    text: "More";   
}

.button-about {
    body: "About";
}

.button-donate {
    inner-html: "Donate";
}

.box {
    color:white;
    font-size:24px;
    text-align:center;
    width: 100px;
    height: 100px;
    align-items: center;
  justify-content: center;
}

.tip2 { background: #9b59b6; }
.retry { background: #16a085;
         display: flex;
}
.backup {
 background: #e74c3c;
display: flex; }

.tip5 { background:#3498db; }
.tip20 { background:#e57e22; }

Answer 1

尝试在文档的头部添加元数据视图端口，并在特定于设备的媒体查询上将画布宽度设置为100％。

文件负责人

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

<强> CSS

.content {
    display: table;
    /*display: flex;*/
    /*flex-direction: row;*/
}

.buttons { 
    display: table-cell;
    /*display: flex;*/
    /*flex-direction: column;*/
}
.game-display { 
    display: table-cell;
    /*display: flex;*/
    /*flex-direction: column;*/
}

希望这可以解决您的iPhone 5s问题