1

我正在尝试使用 cssgrid.net 中的 1140 网格，但遇到了问题。在 768px - 795px 之间的屏幕上，.container div 上的右填充不起作用。相反，内容开始与浏览器窗口的右边缘对接。我在 Mac 上使用最新版本的 Chrome 浏览我的网站（这个范围的主要问题是纵向的 iPad 是 768 像素）。

cssgrid.net上似乎也发生了同样的事情，右上角的“下载”按钮。

我在我正在处理的网站上提出了一个临时解决方法，将这种大小的屏幕上的填充更改为 5px 而不是 1140.css 中的 20：

@media only screen and (min-width : 768px) and (max-width : 795px){ 
.container{ padding-left: 5px; padding-right: 5px; } 
}

但这似乎是一个不必要的工作（我更希望有 20px 的填充，因为 5 有点接近舒适）。

如果您对此有任何见解，将不胜感激。

4

2 回答 2

0

问题在于最小宽度。将此添加到网格样式

@media only screen and (max-width: 1023px) {
    .row {
        min-width: 720px;
    }
}
于 2013-02-01T05:01:51.553 回答
0

这是一个丑陋的修复，但您可以使用 php 检查用户是否在 iPad 上，然后将其更改viewport为 1024px 宽。将您当前的视口元标记替换为以下内容：

<?
    $is_ipad = false;
    // check if user agent is an iPad
    if ( strpos($_SERVER['HTTP_USER_AGENT'],'iPad') ){
        $is_ipad = true;
    }

    // if it's an ipad, set viewport to 1024px wide
    if ($is_ipad){
        echo '<meta name = "viewport" content="width=1024">';
    }

    // if not an ipad, use device width
    else {
        echo '<meta name="viewport" content="width=device-width">';
    }

?>
于 2012-12-05T21:59:38.403 回答