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

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有点接近舒适度)。

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

最佳答案

这是一个难看的修复程序,但是您可以使用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">';
    }

?>

10-05 20:58
查看更多