Ipad 上的响应元素

Question

我正在处理的网站上的 4 个元素的响应速度有问题饼图元素在我的桌面互联网浏览器上完美缩放。但由于某种原因，元素在 IPAD 2 上重叠。我使用了这个 CSS:

@media only screen 
and (min-device-width : 768px)  
and (max-device-width : 1024px)  {
.q_pie_chart_holder {
    display: inline-block;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 0.3s ease 0s;
    width: 100%;
}
}

header 图像在屏幕尺寸上也被截断了。

   .elephant-header {
background-image: url("http://www.elephantdesign.nl/wp-content/uploads/2015/05/header1.jpg");
background-repeat: no-repeat;
background-size:100%; 
margin:0 auto;
max-width:100%;
height: auto;

}

有人知道为什么吗？

Answer 1

问题似乎是存在一个 canvas 元素，这些饼图元素的宽度和高度设置为 174 像素。您可以查看下面的屏幕截图以查看出现的位置。

所以你有几个选择：

更改 canvas 元素的宽度和饼图的大小。我认为您正在使用这个库 - http://rendro.github.io/easy-pie-chart/ 来制作饼图。看起来作者在 <canvas> 元素上分配了一个内联 height 和 width 以相应地调整它的大小。
将您的栏布局更改为两两排列，即对于 768px 或更小的屏幕使用 vc_col-sm-6。

我没有注意到 header 图片的问题 - 你能添加一张图片被截断的地方的截图吗？

Ipad 上的响应元素

Responsive elements on Ipad

css

ipad

responsive-design