Подгонка элемента под ширину области просмотра при масштабировании

У меня есть div, содержащий текст и изображения. Я хочу разрешить пользователю увеличивать масштаб, чтобы изменить размер текста/изображений, но я не хочу, чтобы дисплей когда-либо требовал горизонтальной прокрутки (т. е. независимо от масштабирования, я хочу, чтобы div заполнил ширину области просмотра ).

Я видел много сообщений о области просмотра (и я использую метатег «просмотр» в заголовке), но я не знаю, как изменить ширину div, чтобы текст/изображения всегда переносились на ширину области просмотра. Кажется, мне нужно поймать какие-то события изменения размера/масштабирования с помощью javascript и изменить размер div, но это выходит за рамки моего ноу-хау. Спасибо!


person Steve A    schedule 08.12.2013    source источник
comment
Масштабирование в браузере сделано для удобства. Он не был предназначен для идеального поддержания макетов страниц. Если у вас нет веских причин для решения этой проблемы, не тратьте свое время.   -  person Diodeus - James MacFarlane    schedule 09.12.2013
comment
Хороший вопрос, Диодей. Оглядываясь назад, мы пытались использовать функцию масштабирования, чтобы позволить пользователю изменять размер шрифта, не выводя текст за пределы области просмотра. Вместо этого мы добавили кнопки, позволяющие пользователю увеличивать и уменьшать размер шрифта — гораздо более чистое решение.   -  person Steve A    schedule 11.12.2013


Ответы (1)


Интересный вопрос. Я бы подошел к этому в два этапа:

  1. Обнаружение события масштабирования с помощью jQuery Mobile. Вам нужно либо написать свою собственную функцию, либо использовать сторонний плагин для обнаружения масштабирования.

  2. Обработчик событий, который устанавливает ширину div равной ширине области просмотра.

Например, если вы использовали jQuery Mobile и плагин Touchy, вы получите что-то вроде:

$( '.mydiv' ).on('touchy-pinch', function() {
        $( this ).css( "width", $( window ).width());
});
person Ryne Everett    schedule 09.12.2013