В настоящее время я пытаюсь разработать простое веб-приложение для обозревателя рабочего стола и планшета. Все работает отлично на рабочем столе и почти так на планшете, за исключением небольшого изменения размера, которое заставляет элементы попадать в неправильное положение.Почему абсолютные размеры отображаются в разных размерах на мобильных браузерах?
Первоначально у меня были все поля, ширина и т. Д., Определенные в значениях пикселей, которые, как я предполагал, создавали бы согласованность. Тем не менее, в chrome для рабочего стола элемент, определенный как 339px, включая поля, был 339px, но на chrome для android удаленная отладка показала, что это 346px, даже с тем же CSS, определяющим его как 339px, вызывая перекрытие и, следовательно, странный макет.
После некоторого копания я услышал рассказ о метатеге видового экрана, который может вызвать разный рендеринг на мобильных браузерах. Однако, после добавления:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Чтобы попытаться заставить мобильный браузер вести себя, как рабочий стол, браузер не вынес это не по-другому.
Наконец, я попытался изменить значения пикселей на значения em, чтобы можно было немного поиграть, если размеры шрифта были разными и им еще не повезло. На данный момент у меня скорее нет идей, поэтому любые указатели будут высоко оценены.
Заранее благодарен!
Возможно, это связано с различиями в плотности пикселей. У меня была такая же проблема. * EDIT * Нет, все равно будет такое же количество пикселей. –
Вы можете использовать% вместо пикселей и можете использовать бутстрап для подготовки готовых классов для гибкого дизайна. – Anup