0

我已经开发了一个基于显示器尺寸的网站。当我在 Ipad 上看到它时，右角缺少 css 颜色。看一看

在此处输入图像描述 这是HTML代码。

 <div id="nav-top">
        <div class="wrapper">
            <!-- Top Navigation Menu -->
            <ul class="menu-nav-top">
                <li>About</li>
                <li>Contact</li>
            </ul>
            <!-- Top Social Links -->
            <ul class="social-links">
                <li>contact</li>
                <li>Twitter</li>
                <li>Facebook</li>
            </ul>
        </div><!--#wrapper-->
    </div><!--#nav-top-->

    #nav-top {
        background: url("img/bg_body_blue6.png") repeat-x scroll 0 0 transparent;
        height: 36px;
        position: relative;
        z-index: 4;
    }

    .wrapper {
        margin: 0 auto;
        position: relative;
        width: 1146px;
    }

查看源代码后，我发现由于包装器的宽度大于 ipad 的安全区域（920px），ipad 仅将 css 应用到可视区域，其余部分您需要滚动查看 dosn没有风格。

有没有办法解决这个问题（在不可见区域或需要滚动查看的区域上获取 css）

谢谢

4

3 回答 3

1

如果问题是您的网站大小错误，您将根本看不到右侧呈现的内容。

你在用 UL 做什么？一个浮左，另一个浮右？如果是这种情况，那么很可能是因为您在“包装器”上设置了宽度，而不是在“导航顶部”上。

如果你把它改成类似

#nav-top {
  background: ...;
  height: 36px;
  width: 100%;
  max-width: 1146px;
}


.wrapper {
  display: block;
  width: 100%;
  max-width: 1146px;
}

它应该可以正常工作。清除 UL 上的浮动也应该可以解决这个问题。因此，将其添加到您已经存在的代码中

 .wrapper:after {
   content: ' ';
   display: inline-block;
   height: 0px;
   visibility: hidden;
   clear: both;
 }

你也应该没问题。

不过，我同意 Andy 的观点，你不应该使用固定宽度（除非它们依赖于设计），因为它在移动时永远不会很好地转换。

希望有帮助。

于 2012-10-27T01:16:07.897 回答
0

如果您希望它在 iPad 上也能很好地显示，最好基于百分比而不是绝对值来构建它。

对于您的粒子情况，您可以max-width:100%;在包装器中添加 a 以强制它为 1146px 宽，或者当屏幕/浏览器小于该宽度时，它将只是整个宽度。

因此，将 .wrapper CSS 更改为：

.wrapper {
    margin: 0 auto;
    position: relative;
    width: 1146px;
    max-width: 100%;
}

另一种解决方案是只给出宽度百分比而不是绝对像素。但是对于您要完成的工作，上述内容应该没问题...（只需确保 div 中的其他任何内容都不需要完整的 1146px 例如img {max-width:100%}也可能有帮助）

但这可能只能解决当前的问题。理想情况下，如果您希望您的网站适合所有浏览器尺寸、设备和形状，您希望构建它响应式。开发响应式网站的一个很好的框架是http://foundation.zurb.com/

于 2012-10-27T01:03:16.660 回答
0

听起来您需要查看Viewport Meta Tag。它用于设置您正在查看的网站的比例与屏幕大小成正比。

它可以包含在您的 html 文件中，如下所示：

<head>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
于 2012-10-27T01:04:59.220 回答