У меня есть страница с 3-мя большими контейнерами, у всех есть альфа-прозрачный фон, который отлично работает на рабочем столе, но на планшете (iOS и Android) и iphone% sum кажется неправильным
<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 и height в контейнере 1 и 3 вместо высоты, но 3-й блок отлично работает на настольном браузере n mobile 3-кратное перекрытие для 1/2px или у них небольшое пространство 1/2px
все 3 окна имеют один и тот же PNG с альфой, где перекрытие цвета становится темнее, если я не могу исправить%, было бы хорошо найти решение (возможно) только на мобильном устройстве, чтобы перекрывать без сумм backgroud
Убедитесь, что вы установили метатег
<meta name="viewport" width="device-width" />
Это установит от 100% до 100%
попробуйте это вместо этого:
<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>
пролем состоит в том, что% являются средними для покрытия до максимального количества пикселей. у вас может быть один раз один пиксель, и один раз перекрытие 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>
Если бы вы предоставили кодекс или скрипку, нам было бы намного легче для всех нас
У ваших div также есть прокладка?
По умолчанию процентная ширина для CSS не включает прописку в большинстве браузеров. Например, если у вас ширина 25% и заполнение 5 пикселей, фактическая ширина div составляет 25% +5px.
свойство boxsizing: border-box приведет к тому, что большинство браузеров (заметное исключение - IE7) будут обрабатывать ширину как включающую дополнение - таким образом, ширина 25% ширины с отступом 5 пикселей будет 25%
это правда, что он не работает в мобильном браузере, но отлично работает на проверке вкладки Android.