Нужно было в зависимости от ширины экрана менять таблицы стилей. Все это в Cordova (Phonegap). Это такая фигня, с помощью которой можно делать кроссплатформенные приложения, зная только HTML, CSS и JavaSript.
Получаю screen.width, 480 пикселей. Все правильно, ширина экрана у меня такая. Но внутри все оказывается шире чем нужно. Ширина страницы тоже расчитана на 480 пикселей.
В чем же фигня?
Есть такой параметр как devicePixelRatio. Это отношение настоящих пикселей экрана к CSS пикселям.
Да, они не всегда равны, хоть и приложение развернуто на весь экран.
Ну точно, window.devicePixelRatio выдает 1.5. Делим ширину экрана на пиксельратио и вот CSS ширина. Исходя из этого уже и надо подключать ту или иную таблицу стилей.
Если нужна высота, ее считать можно точно так же.
Игнат 5.03.2015 в 21:52
Дмитрий 8.03.2015 в 15:06
Зачем! Можно сделать проще, пропишите в таблице стилей(CSS) сразу несколько нужных вам позиций, а в html коде нужный вам текст спрячьте под тегами.
Денис Нихаев 14.03.2015 в 14:50
А я вот голову 4 дня ломал как это сделать!
Alexander 20.03.2015 в 16:47
Эта фигня устанавливаемая програмулина или онлайн-сервис? Что-то гугл много информации по этому вопросу не выдает…
Маргарита 22.03.2015 в 17:40
ой, посмотрела я, как разрабатывается приложение с помощью этой “фигни”… кашмар, очень заморочек много…для меня трудно ))
max 24.03.2015 в 21:47
Да помоему ,всегда был шыре помоему.Да но невсе придерживаются стилей.
Евгений 29.03.2015 в 10:17
Коротко и ясно. Ушел внимать…
Валерий 1.04.2015 в 7:32
Я приобрел тему для вордпресс с адаптивным дизайном. Ширина автоматически подстраивается под экран компьтера, планшета или телефона. Тянешь за уголок браузера и страница адаптируется сразу по ширине. Если кому интересно(Не реклама.),я брал у Гудвина.
Заработок в интернете 6.04.2015 в 23:44
Достаточно просто вписать ширину не в пикселях, а в процентах.
Форум о заработке в интернете 6.04.2015 в 23:45
Ну и в принципе думаю все же лучше сконцентрироваться на общих значениях, а не для конкретных телефонов.
xsharz 9.04.2015 в 11:09
хотел сделать из сайта приложения, вот и этот урок немного помог
proklub os 14.04.2015 в 17:50
спасибо что делишься опытом!
молодец)
Надежда 15.04.2015 в 16:54
Да, иногда над мелочью долго ковыряешься, это как пойдет
Виктор 16.04.2015 в 19:46
Очень интересная статья, спасибо!
splik 18.04.2015 в 23:33
Наконец-то нашёл, а то уже второй день голову ломаю, как эту ширину получить.
steblo 21.04.2015 в 18:01
Объявил о революционном новом алгоритме, который не показал и не рассказал как он работать будет, воды в уши налил и как всегда ничего конкретного не рассказал вообще ни про какой либо хоть маленький момент, только понятиями общими поиграл в дурака для дурачков.
mrkaban 25.04.2015 в 12:39
Забавно… Немного пугало, что разные соотношения, но попробую.
Антон 28.04.2015 в 3:36
Я подумал, а нельзя ли так реализовать, что яваскриптом узнаешь размер экрана и даешь команду браузеру на увеличение или уменьшение? По принципу когда жмешь ctrl+колесо мышки. Надеюсь понятно объяснил. Или невозможно скриптом изменить масштаб в браузере?
vadim 11.05.2015 в 23:03
крутая статья
Евгений 12.06.2015 в 11:16
единственная нормальная статья в интернете которую я смог найти, спасибо огромное автору выручил. А все потому что при поиске в гугл по запросу СSS шина выдает такой бред, ужас просто….
Алекс 24.06.2015 в 22:16
Кто поможет переделать тему под адаптивный дизайн?
Владислав 3.07.2015 в 17:47
Никогда не обращал на это внимание
Android 9.08.2015 в 18:08
Хех, так, а для кого медиа-запросы? Стаивте media-queries и указываете min/max width/height (вместе) и будет вам счастье, зачем извращаться-то?
Nogfo 11.08.2015 в 9:09
А я не парилась, взяла готовый адаптивный шаблон, переделала как нравится и готово))
Елена 11.08.2015 в 9:50
Очень полезная информация.
VideoStrimer 28.09.2015 в 14:34
Вроде-бы все это решается через медиазапросы, например, для устройств с шириной экрана до 480 пикселей:
@media screen and (max-width:480px){
/*тут стили
*/
}
Максим 20.01.2016 в 10:32
Один из выходов – это адаптивный дизайн. Раньше, когда таких дизайнов не было, использовал javascript для вычисления динамической ширины, и уже затем подставлял соответствующие значения css для элементов страницы.
Graf 6.07.2016 в 21:42
А я обычно детектор устройств использую, чтоб шаблоны менять.
vvgerinovskiy 7.07.2016 в 12:14
Можно через CSS b HTML сделать
linda.goldenmayer 1.08.2016 в 11:30
очень интересная и полезная статья. Автору спасибо!
Иван 3.04.2017 в 19:52
Чет я ничего не понял..
muzanaka 3.04.2017 в 21:14
На самом деле лучше натягивать на кордову сразу ратчед и не будет подобных проблем. А так – медиа решает
Игорь 29.05.2017 в 10:17
Спасибо большое очень полезная статья!
Олег 8.08.2017 в 17:25
Мы обычно готовые скрипты используем, которые были ранее написаны нами.
Игорь 14.08.2017 в 12:07
Попробую по вашему описанию. друг получится. Буду экспериментировать на старом телефоне