Неверный процент CSS на мобильном

0

У меня есть страница с 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

Теги:

4 ответа

2
Лучший ответ

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

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

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

Поделиться
  • 0
    Это очень помогает, я думаю, что лучший пример - это окно просмотра микса + первый пример GCyrillus. Даже если это не идеальный вид, как на рабочем столе. Если я не применяю предложение GCyrillus, я получаю крошечное пространство, я делаю крошечное перекрытие. Это может быть лучше, чем космос. Я думаю, что нет решения, чтобы избежать прозрачного мультиплеера с перекрытием BG
  • 0
    На самом деле я видел, что на рабочем столе с первым примером GCyrillus я тоже вижу наложение, так что я собираюсь с холостым ходом с высоты
0

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

<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>

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

Поделиться
0

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

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

свойство boxsizing: border-box приведет к тому, что большинство браузеров (заметное исключение - IE7) будут обрабатывать ширину как включающую дополнение - таким образом, ширина 25% ширины с отступом 5 пикселей будет 25%

Поделиться
  • 0
    Нет, утренник и отступы установлены на 0
0

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

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню