процент CSS неверен на мобильном телефоне

Question

У меня есть страница с 3-мя большими контейнерами, у всех есть альфа-прозрачный фон они отлично работают на рабочем столе, но на планшете (iOS и Android) и iphone% сумма кажется неправильной

<div style="position: fixed; top: 0; left: 0; right: 0; height: 10%;"> CONTAINER 1 </div> 
<div style="position: fixed; top: 10%; left: 0; right: 0; bottom: 5%;"> CONTAINER 2 </div> 
<div style="position: fixed; bottom: 0; left: 0; right: 0; height: 5%;"> CONTAINER 3 </div> 

я также попытаться назначить bootm и высоту в контейнере 1 и 3, а не высоту, но 3 коробка отлично работает на настольном браузере п мобильного на 3 ящика перекрытием на 1/2px или они имеют мало 1/2px пространство

все 3 коробки имеют одинаковый PNG с альфой, где перекрытие цвета становится темнее , если я не могу исправить% будет нормально, чтобы fi й раствор (это возможно) только на мобильный телефон, чтобы alowe перекрытие без суммы Backgroud

Answer 1

Убедитесь, что вы установили мета-тег

<meta name="viewport" width="device-width" /> 

Это установит 100% до 100%

Answer 2

ли ваши дивы также есть прокладка?

По умолчанию процентная ширина для CSS не включает дополнение к большинству браузеров. Например, если у вас ширина 25% и заполнение 5 пикселей, фактическая ширина div составляет 25% + 5 пикселей.

boxsizing: граница-бокс свойство будет вызывать большинство браузеров (заметное исключение составляет IE7) для лечения ширины, включительно набивки - поэтому 25% ширина DIV с 5px обивкой будет 25%

Answer 3

попробуйте вместо этого:

<div style="position: fixed; top: 0; left: 0; right: 0; bottom:90%;"> CONTAINER 1 </div> 
<div style="position: fixed; top: 10%; left: 0; right: 0; bottom: 5%;"> CONTAINER 2 </div> 
<div style="position: fixed; bottom: 0; left: 0; right: 0; top: 95%;"> CONTAINER 3 </div> 

prolem, что% в среднем сражен до ближайшего числа полного пикселя. у вас может быть один раз один пиксель, и один раз перекрытие 1 пикселя.

вы можете попробовать это по-другому:

<div style="position:fixed;top:0;left:0;right:0;bottom:0;padding:10% 0 5%;box-sizing:border-box;background:yellow"> 
    <div style="position:absolute;top:0;left:0;right:0;height:10%;background:rgba(0,0,0,0.3);">5% top</div> 
<div style="height:100%;background:rgba(0,0,0,0.3);"> middle </div> 
<div style="position:fixed;right:0;left:0;bottom:0;height:5%;background:rgba(0,0,0,0.3);">bottom:5%</div> 
</div> 

Ifyou предоставил codepen или скрипку, было бы намного проще для всех нас

Answer 4

это правда, что он не работает на мобильный браузер, но работает отлично на вкладке андроида проверить

http://devilspc.in/stackoverflow/css-value.html