iPhone 6/6 Plus 以 100% 宽度截断内容

Question

我正在尝试为一些通用文件共享实用程序的链接创建一个网页。我遇到的问题是在 iPhone 6/6 Plus 上它会切断右侧的内容。我已将其容器的宽度设置为 100%，并且其中包含的 div 设置为显示 inline-block 以便它们可以居中对齐。为什么 iPhone 6/6 Plus 会切断它而不是把它扔到下一行。我已验证旧版本的 iOS、Android 和台式电脑似乎没有此问题。

视口：

<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />

CSS：

html {  
    background: url('images/background.png') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
body, html
{
    margin: 0;
    padding: 0;
    font-family: 'PT Sans';
}
.box
{
    height: 140px; 
    width: 150px;
    text-align: center;
    display: inline-block;
}
.box img 
{
    width: 90px;
    height: 90px;
    margin-bottom: 10px;
}
.box a:link, .box a:visited, .box a:hover
{
    text-decoration: none;
    color: #fff;
}
.title
{
    font-size: 48pt; 
    color: #fff;
    font-weight: lighter;
}
a:link, a:visited, a:hover
{
    text-decoration: none;
}
.subtitle
{
    color: #fff; 
    display: block; 
    margin-bottom: 20px;
}

@media (max-width:600px) { 
    .title
    {
        font-size: 22pt;
    }
    .subtitle
    {
        margin-bottom: 5px;
    }
}

HTML：

<div>
    <span style="position: absolute; top: 5px; width: 100%; margin: 0; text-align: center; color: #fff; font-size: 24pt; z-index: 2; display: block;">----</span>
    <div style="width: 100%; height: 60px; background-color: black; opacity: .3;"></div>
    <div style="text-align: center; margin: 15px;"><span class="title" >Share from the cloud.</span><br /><span class="subtitle">Select you prefered service to access your media and information from the web.</span></div>
    <div style="margin: 0 auto; text-align: center; max-width: 1200px; overflow: hidden; align-items: center">
        <div class="box"><a href="http://www.dropbox.com"><img src="images/dropbox.png" alt="" /><br />Dropbox</a></div>
        <div class="box"><a href="http://onedrive.live.com"><img src="images/one_drive.png" alt="" /><br />OneDrive</a></div>
        <div class="box"><a href="http://www.sugarsync.com"><img src="images/sugarsync.png" alt="" /><br />SugarSync</a></div>
        <div class="box"><a href="http://www.google.com/"><img src="images/google.png" alt="" /><br />Google</a></div>
        <div class="box"><a href="http://www.google.com/drive"><img src="images/google_drive.png" alt="" /><br />Google Drive</a></div>
        <div class="box"><a href="http://www.facebook.com"><img src="images/facebook.png" alt="" /><br />Facebook</a></div>
        <div class="box"><a href="http://instagram.com"><img src="images/instagram.png" alt="" /><br />Instagram</a></div>
        <div class="box"><a href="http://flickr.com"><img src="images/flickr.png" alt="" /><br />Flickr</a></div>
        <div class="box"><a href="http://www.box.com"><img src="images/box.png" alt="" /><br />Box</a></div>
    </div>
</div>

Answer 1

iPhone6 的最大宽度为 375px。

http://mydevice.io/devices/

在@media 标签中更改外部 div 的最大宽度（您使用 max-width: 1200px 设置内联样式的那个）。如果你创建一个单独的类会更容易。