我正在尝试使用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">';
}
?>