Question

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

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

我在a site I'm working on上做了一个临时工作，将这个大小的屏幕上的填充更改为5px而不是1140.css内的20：

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

但这似乎是一项不必要的工作（而且我宁愿使用20px的填充，因为5有点接近以获得舒适度）。

如果您对此有任何见解，我们将非常感激。

Answer 1

这是一个丑陋的修复，但您可以使用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">';
    }

?>

Answer 2

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

@media only screen and (max-width: 1023px) {
    .row {
        min-width: 720px;
    }
}

1140网格ipad肖像

2 个答案: