Прежде чем кто-либо решит, что это простой вопрос или возможный дубликат, прочитайте полный пост.
Я занимаюсь разработкой приложения для Android и реализовал WebView для работы в качестве части приложения. WebView показывает контент с веб-сайта, который сделан с помощью начальной загрузки и является мобильным. Тем не менее, CSS портится здесь и там, и в результате все приложение выглядит странно, а элементы кажутся «неуместными».
Например, я помещаю коробку и некоторый текст в контейнер и размещаю его специально, используя поля CSS. Как ниже:
.testcontainer {
border: 1px solid red;
height: 50px
width: 100%;
}
.testcontainer .box {
height: 50px;
width: 50px;
background-color: blue;
display: inline-block;
vertical-align: top;
}
.testcontainer .text {
font-size: 16px;
display: inline-block;
vertical-align: top;
border: 1px solid blue;
}
<div class="testcontainer">
<div class="box"></div>
<div class="text">Testing</div>
</div>
Теперь все хорошо в браузере MacBook Safari и Opera, а граница текста идеально подходит для пикселей и выровнена по верху синего прямоугольника и т. Д. Однако в WebView внутри приложения текст находится на расстоянии около 2px от в некоторых случаях 5px и так далее. Зачем? Я пытался использовать em вместо px для размера шрифта, но возникает та же проблема. Чего мне не хватает?