Question

我正在尝试创建一个网页，用于链接到一些常规文件共享实用程序。我遇到的问题是iPhone 6/6 Plus上的内容正在切断右边的内容。我已将其容器的宽度设置为100％，并且其中包含的div设置为内联块的显示，以便它们可以居中对齐。为什么iPhone 6/6 Plus会将其切断而不会将其丢弃到下一行。我已经确认旧版iOS，Android和台式电脑似乎没有这个问题。

enter image description here

视口：

<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的最大宽度为375像素。

http://mydevice.io/devices/

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

iPhone 6/6 Plus切断100％宽度的内容

1 个答案: