Масштабирование содержимого HTML с использованием JQuery Mobile & Phonegap - PullRequest
Новая
       33

Масштабирование содержимого HTML с использованием JQuery Mobile & Phonegap

3 голосов
/ 23 февраля 2012

Мне нужно динамически загружать контент из электронных писем HTML в некоторый тип области содержимого в моем HTML, чтобы он масштабировался так, чтобы соответствовать, точно так же, как это делают родные почтовые приложения для iPhone / Android.Я потратил два дня на поиски в Google и безрезультатно.Я загружаю контент HTML (который часто устанавливается на ширину = 600 или что-то хорошее), но вместо масштабирования он выглядит следующим образом:

Пример iPhone Simulator

HTML-код очень прост: 

<div data-role="page" id="messagedetailpage" data-add-back-btn="true">
    <div data-role="content" id="messagedetailcontainer"></div>
</div>

Обеззараженный HTML-код электронной почты загружается в div (messagedetailcontainer), после чего я попробовал следующие вещи:

  1. Изменение размера области просмотра с помощью: $ .mobile.metaViewportContent = "ширина = ширина устройства, начальный масштаб = 0,5, минимальный масштаб = 0,5, максимальный масштаб = 0,5";

  2. Вызвать несколько триггеров в div, например: $ ("# messagedetailcontainer"). Append (data.msg_body) .trigger ('updatelayout');

  3. То же, что и# 2, но с «create», «resize», «load» и «change».

  4. $ (окно) .resize ();

  5. Утилизация div и помещение его в iFrame (совсем не повезло)

  6. Я исследовал iScroll, ScrollView, различные примеры autoscale.js, но ничего не кажетсяподходит мойнеобходимость.

Я начинаю задумываться, возможно ли это вообще.Если кто-нибудь может мне помочь, я буду вечно благодарен.Я не против того, чтобы застревать часами, но как только он превращается в дни, он начинает сводить с ума.И, к сожалению, это шоу-стоппер для меня.

Заранее спасибо за любую помощь!

1 Ответ

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

Вы можете получить ширину порта просмотра и ширину контента, затем уменьшить масштаб контента на основе отношения двух: 

var venderPrefix = ($.browser.webkit)  ? 'Webkit' : 
                   ($.browser.mozilla) ? 'Moz' :
                   ($.browser.ms)      ? 'Ms' :
                   ($.browser.opera)   ? 'O' : '';
var ratio = $(window).width() / $('#newContent').width();
$('#newContent').css(venderPrefix + 'Transform', 'scale(' + ratio + ')');
...