iPhone 6/6 Plus截取宽度为100％的内容

Question

I am trying to create a webpage for links to some general file sharing utilities. The problem I am having is that on the iPhone 6/6 Plus it is cutting off the content on the right. Ive set the width of its container to 100% and the div's contained in it are set with a display of inline-block so that they can be centered aligned. Why is the iPhone 6/6 Plus cutting it off and not throwing it down to the next line. I have verified that older versions of iOS, Android, and desktop computers dont seem to have this issue.

Viewport:

<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

The max width for iPhone6 is 375px.

http://mydevice.io/devices/

Change the max-width of the outer div (the one you styled inline with max-width: 1200px) within the @media tag. It would be easier if you create a separate class.