Javascript mobile - рассчитать размеры элементов в пикселях на основе размеров экрана - PullRequest
Новая
       1

Javascript mobile - рассчитать размеры элементов в пикселях на основе размеров экрана

0 голосов
/ 18 февраля 2012

Я хочу рассчитать размеры определенных элементов (img, ul, div и т. Д.) На основе размера экрана. Я не могу использовать процентные значения. Мне нужны значения пикселей. Я также не хочу «жестко» кодировать все, используя медиа-запросы и новый набор изображений для каждого разрешения или размера экрана.

Я думал об этом, используя размер экрана. Мне нужен только расчет ширины. Поэтому я добавляю начальную ширину моих изображений и некоторое начальное расстояние между ними -> общую ширину, а затем получаю коэффициент масштабирования, используя: screenwidth / totalwidth

Теперь я масштабирую все мои изображения, а также расстояние между ними с этим фактором.

Это очень простой макет, всего несколько изображений и HTML-элементов. Так что это масштабирование не должно быть дорогим.

Это сработало бы, если бы устройства давали мне надежное измерение ширины экрана. Но в зависимости от устройства я получаю разные значения этого значения. Я использую screen.width

В некоторых случаях screen.width является текущей шириной - в портретной ориентации это небольшое значение, в альбомной - большое. Но в других случаях ширина всегда одинакова - это значение, которое определяется как ширина устройства.

Так как мне масштабировать макет в соответствии с шириной экрана в соответствии с вращением и без значений CSS%? Является ли это приемлемым способом масштабирования макета или я не работаю?

Редактировать: Я должен добавить больше деталей после попытки решения Джаспера. Изображения используются в слайдере. Слайдер - это, по сути, UL, и каждый LI содержит изображение с плавающей точкой: left - так что все изображения добавляются горизонтально один за другим. С переполнением скрыто и прочее виден только текущий слайд. Теперь официальная ширина UL является суммой ширины всех содержащихся LI. И это означает, по крайней мере, с моим текущим состоянием знаний, что я не могу использовать процентный размер для элементов LI, потому что если я это сделал, это будет% от этой общей ширины UL, которая очень велика, и я заканчивается огромными элементами LI / изображениями.

Нет ли надежного способа получить текущую ширину экрана для всех устройств? У меня уже есть рабочий код, мне нужно только, чтобы значение ширины экрана было правильным.

Новое обновление

Посмотрите здесь аналогичный подход к тому, что я пытаюсь сделать:

http://ryangillespie.com/phonegap.php#/phonegap.php?

Запись от 18 июня 2011 года «Одно разрешение экрана, чтобы управлять ими всеми»

Я попробовал также с этим примером, скопируйте его в мой код. Но это тоже не работает. У window.outerWidth те же проблемы, что я описываю для screen.width (а также JQuery $ ('body'). width ()). Он работает до тех пор, пока устройство не вращается - он хорошо инициализируется. Но при первом повороте, в зависимости от устройства, у меня возникают проблемы. В некоторых это работает как ожидалось, в других это меняет значения, так что я получаю большую ширину в портретном режиме и короткую в альбомной ориентации, в других это дает фиксированную ширину и высоту все время, в других это вообще не вращается .. ..

Ответы [ 2 ]

1 голос
/ 18 февраля 2012

Это, скорее всего, выполнимо только с помощью CSS (что обычно хорошо для производительности): 

img {
    width  : 100%;
    height : auto;
}

Это позволит сохранить все пропорции изображения, но изменить его размер до 100% ширины.Теперь эта ширина установлена ​​на основе ширины родительского элемента (ов) изображения.Если вы используете jQuery Mobile, тогда элементы data-role="content" имеют отступ 15px, поэтому для удаления можно просто добавить контейнер к элементам изображения, который удаляет заполнение:

HTML - 

    <div class="remove-page-margins">
        <img src="http://chachatelier.fr/programmation/images/mozodojo-mosaic-image.jpg" />
    </div>

CSS - 

.remove-page-margins {
    margin : 0 -15px;
}​

И, walaa, у вас есть адаптивные изображения без нагрузки кода или служебных данных.

Вот демонстрация с использованием контейнера и без использованияконтейнер: http://jsfiddle.net/EVF4w/

0 голосов
/ 19 февраля 2012

По совпадению я обнаружил, что это работает: 

$(window).resize(function() {
    updateScaling($('body').width());
});

Это всегда вызывается и проходит правильную ширину. Насколько я помню он тоже работает с screen.width

В updateScaling я вычисляю scalingFactor и корректирую свои элементы.

Я опробовал адаптивный CSS, медиа-запросы и т. Д., Но в какой-то момент это уже не имело смысла, потому что я все равно должен пересчитать границы UL ползунка на основе текущего слайда и новой ширины - и других вещей, нужен скрипт. Поэтому я все сделал с помощью скрипта.

Я удалил window.onorientationchange.

...