高度100%以及宽度100%导致移动设备出现问题

时间:2016-08-23 23:50:49

标签: html css mobile media-queries image-resizing

我发现了TON的关于移动宽度/高度的帖子和问题。前两个答案是使用媒体查询,或使用vh / calc()。我经常看到的另一个问题是使用边距/填充/边框对宽度/高度(100%)与宽度/高度(自动)的误解。我遇到的似乎是独一无二的,但随着大量的移动问题,我有一种感觉,已经有了答案。如果你已经看过这个,请指出我们正确的问题/答案。

我创建了一个黑色玻璃以及一个用作图像预览器的元素。玻璃和图像的宽度(" 100%")和高度(" 100%")没有任何填充,边距或边框。在电脑上,它看起来很完美。在移动设备上,可以抛弃尺寸并显示背景。

如果我在高于宽度的图像上移除高度(" 100%"),则会调整整个元素的大小。如果图像宽度大于高,则移除宽度(" 100%")会使其再次适当增长。但是,这并没有解决我的问题,因为没有100%的宽度或高度上限,更大的图像会溢出。

我首先在我的手机(Android)上发现了这个问题,并且在Chrome的模拟器上重复它没有问题。我已快速录制了我所看到的内容screencast

有人建议css规则从父元素泄漏。 Chrome支持风格&all; initial:'重置CSS。我还用method手动重置了我的CSS。重置样式并没有改变问题。

再次感谢您抽出宝贵时间来研究我的问题!

0 个答案:

没有答案