Squeak.ru - шаблоны программирования

JQueryMobile на Android: область просмотра подстраивается под размер текста в Listview

Моя проблема возникает во внутреннем браузере Android в сочетании с JQuery Mobile. Когда я перезагружаю текущую страницу, содержимое сжимается, чтобы соответствовать тексту в списке.

Подробнее: код отлично работает на iPhone, мобильных настольных инструментах и ​​Firefox для Android. Однако во внутреннем браузере Android у меня есть эта странная проблема с кодом ниже. Смотрите мое редактирование ниже.

Что я пробовал до сих пор: я много играл с метатегом окна просмотра. Во всяком случае, я не думаю, что это проблема, потому что контент отображается правильно на любом другом сайте в моем приложении.

<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>

$('meta[name=viewport]').attr('content','width='+$(window).width()+',user-scalable=no');

как эти сообщения предлагают:

Мой код:

<html>
    <head>
        <meta name="viewport" content="width=650">
        <!-- CSS and Scripts-->
    </head>
    <body>
        <!-- Page Wrapper -->
        <div data-role="page">

            <section data-role="content">
                <h2>
                   Code Sample
                </h2>

                <div class="ui-grid-solo">
                    <p style="margin-bottom: 38px;">
                        <a href="?id=a" data-ajax="false">A</a>
                        <a href="?id=b" data-ajax="false">B</a>
                        <a href="?id=c" data-ajax="false">C</a>
                    </p>


                </div>

                <!-- Dynamic content-->
                <ul data-role="listview" data-inset="false">
                    <!-- Use ?id to grab and display data (CodeBehind.vb)-->
                </ul>            

            </section>   

        </div>                 
    </body>
</html>

Кто что думает, или боролся с подобной проблемой?

Редактировать: Я кое-что понял, проблема, похоже, возникает в этом куске кода:

<!-- Dynamic content-->
<ul data-role="listview" data-inset="false">
    <!-- Use ?id to grab and display data (CodeBehind.vb)-->
</ul> 

Обычно listView заменяет большие текстовые элементы «точкой-точкой-точкой» в конце, чтобы они помещались на экране. В моем случае это все еще происходит, но в тексте есть много символов, прежде чем произойдет сокращение. В результате все уменьшается. Как мне это решить?


Ответы:


1

Поскольку у меня нет ответов на этот вопрос, я публикую свое исправление:

Только в мобильных сафари-браузерах элементы listView не сокращаются. Теперь я вызываю функцию, которая делает это вручную на pageinit:

    fixListView: function () {
        var brokenAgent = "Safari";
        var currentUserAgent = navigator.userAgent;
        if (currentUserAgent.indexOf(brokenAgent) != -1) {
            var listItemList = $('.long-text');
            for (var i = 0; i < listItemList.length; i++) {
                var text = listItemList[i].innerText;
                if (text.length > 40) {
                    var newText = text.substr(0, 40);
                    listItemList[i].innerText = newText + "...";
                }
            }
        }
    }

Все еще не очень доволен своим исправлением, любые идеи по улучшению приветствуются!

08.01.2013
Новые материалы

Угловая структура архитектуры
Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..

«Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..

Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...

Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..

Создайте API с помощью Python FastAPI
Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..

Веселье с прокси-сервером JavaScript
Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..

Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...