Как получить CSS-ширину (Cordova-Phonegap)

Опубликовано: 4.03.2015

Нужно было в зависимости от ширины экрана менять таблицы стилей. Все это в Cordova (Phonegap). Это такая фигня, с помощью которой можно делать кроссплатформенные приложения, зная только HTML, CSS и JavaSript.
Philips v808 для привлечения внимания)
Получаю screen.width, 480 пикселей. Все правильно, ширина экрана у меня такая. Но внутри все оказывается шире чем нужно. Ширина страницы тоже расчитана на 480 пикселей.

В чем же фигня?

Есть такой параметр как devicePixelRatio. Это отношение настоящих пикселей экрана к CSS пикселям.

Да, они не всегда равны, хоть и приложение развернуто на весь экран.

Ну точно, window.devicePixelRatio выдает 1.5. Делим ширину экрана на пиксельратио и вот CSS ширина. Исходя из этого уже и надо подключать ту или иную таблицу стилей.

Если нужна высота, ее считать можно точно так же.

Комментариев — 35 »

  1. Игнат 5.03.2015 в 21:52

    :) А я не обращал внимания на это 8)

  2. Дмитрий 8.03.2015 в 15:06

    Зачем! Можно сделать проще, пропишите в таблице стилей(CSS) сразу несколько нужных вам позиций, а в html коде нужный вам текст спрячьте под тегами. =)

  3. Денис Нихаев 14.03.2015 в 14:50

    А я вот голову 4 дня ломал как это сделать!

  4. Alexander 20.03.2015 в 16:47

    Эта фигня устанавливаемая програмулина или онлайн-сервис? Что-то гугл много информации по этому вопросу не выдает…

  5. Маргарита 22.03.2015 в 17:40

    ой, посмотрела я, как разрабатывается приложение с помощью этой “фигни”… кашмар, очень заморочек много…для меня трудно ))

  6. max 24.03.2015 в 21:47

    Да помоему ,всегда был шыре помоему.Да но невсе придерживаются стилей.

  7. Евгений 29.03.2015 в 10:17

    Коротко и ясно. Ушел внимать…

  8. Валерий 1.04.2015 в 7:32

    Я приобрел тему для вордпресс с адаптивным дизайном. Ширина автоматически подстраивается под экран компьтера, планшета или телефона. Тянешь за уголок браузера и страница адаптируется сразу по ширине. Если кому интересно(Не реклама.),я брал у Гудвина. =)

  9. Заработок в интернете 6.04.2015 в 23:44

    Достаточно просто вписать ширину не в пикселях, а в процентах. 8)

  10. Форум о заработке в интернете 6.04.2015 в 23:45

    Ну и в принципе думаю все же лучше сконцентрироваться на общих значениях, а не для конкретных телефонов. :P

  11. xsharz 9.04.2015 в 11:09

    хотел сделать из сайта приложения, вот и этот урок немного помог

  12. proklub os 14.04.2015 в 17:50

    спасибо что делишься опытом!
    молодец)

  13. Надежда 15.04.2015 в 16:54

    Да, иногда над мелочью долго ковыряешься, это как пойдет =)

  14. Виктор 16.04.2015 в 19:46

    Очень интересная статья, спасибо!

  15. splik 18.04.2015 в 23:33

    Наконец-то нашёл, а то уже второй день голову ломаю, как эту ширину получить.

  16. steblo 21.04.2015 в 18:01

    Объявил о революционном новом алгоритме, который не показал и не рассказал как он работать будет, воды в уши налил и как всегда ничего конкретного не рассказал вообще ни про какой либо хоть маленький момент, только понятиями общими поиграл в дурака для дурачков.

  17. mrkaban 25.04.2015 в 12:39

    Забавно… Немного пугало, что разные соотношения, но попробую.

  18. Антон 28.04.2015 в 3:36

    Я подумал, а нельзя ли так реализовать, что яваскриптом узнаешь размер экрана и даешь команду браузеру на увеличение или уменьшение? По принципу когда жмешь ctrl+колесо мышки. Надеюсь понятно объяснил. Или невозможно скриптом изменить масштаб в браузере?

  19. vadim 11.05.2015 в 23:03

    крутая статья :-D

  20. Евгений 12.06.2015 в 11:16

    единственная нормальная статья в интернете которую я смог найти, спасибо огромное автору выручил. А все потому что при поиске в гугл по запросу СSS шина выдает такой бред, ужас просто…. :-D

  21. Алекс 24.06.2015 в 22:16

    Кто поможет переделать тему под адаптивный дизайн?

  22. Владислав 3.07.2015 в 17:47

    Никогда не обращал на это внимание ;(

  23. Android 9.08.2015 в 18:08

    Хех, так, а для кого медиа-запросы? Стаивте media-queries и указываете min/max width/height (вместе) и будет вам счастье, зачем извращаться-то?

  24. Nogfo 11.08.2015 в 9:09

    А я не парилась, взяла готовый адаптивный шаблон, переделала как нравится и готово))

  25. Елена 11.08.2015 в 9:50

    Очень полезная информация.

  26. VideoStrimer 28.09.2015 в 14:34

    Вроде-бы все это решается через медиазапросы, например, для устройств с шириной экрана до 480 пикселей:
    @media screen and (max-width:480px){
    /*тут стили
    */
    } %)

  27. Максим 20.01.2016 в 10:32

    Один из выходов – это адаптивный дизайн. Раньше, когда таких дизайнов не было, использовал javascript для вычисления динамической ширины, и уже затем подставлял соответствующие значения css для элементов страницы.

  28. Graf 6.07.2016 в 21:42

    А я обычно детектор устройств использую, чтоб шаблоны менять.

  29. vvgerinovskiy 7.07.2016 в 12:14

    Можно через CSS b HTML сделать 8)

  30. linda.goldenmayer 1.08.2016 в 11:30

    очень интересная и полезная статья. Автору спасибо!

  31. Иван 3.04.2017 в 19:52

    Чет я ничего не понял..

  32. muzanaka 3.04.2017 в 21:14

    На самом деле лучше натягивать на кордову сразу ратчед и не будет подобных проблем. А так – медиа решает

  33. Игорь 29.05.2017 в 10:17

    Спасибо большое очень полезная статья!

  34. Олег 8.08.2017 в 17:25

    Мы обычно готовые скрипты используем, которые были ранее написаны нами. :-D *CRAZY*

  35. Игорь 14.08.2017 в 12:07

    Попробую по вашему описанию. друг получится. Буду экспериментировать на старом телефоне

Оставьте комментарий к посту ”Как получить CSS-ширину (Cordova-Phonegap)”

Разрешено использовать тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Ключевые слова:
AdSense google page rank Sape SEO WordPress Блог Сапа Софт Яндекс акция ап апдейт бесплатно дизайн домен запросы индекс цитирования интернет интернет-магазин комментарии компьютер конкурс продвижение реклама сайт спам ссылки тИЦ эстафета