JQueryMobile on Android: Viewport adjusts to Textsize in Listview

Question

My problem appears on the internal Android browser in combination with JQuery Mobile. When I reload the current page the content shrinks to fit text into the listview.

More in Detail: The code works fine on IPhone, mobile Desktop Tools and Androids Firefox. However on the internal Android browser I have this weird issue with the code beneath. See my Edit below.

What I've tried so far: I've played a lot with the viewport meta tag. Anyhow, I don't think that's the problem, because the content gets displayed correct on every other site in my app.

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

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

like these posts suggest:

My Code:

<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>

Has anyone an idea, or did fight with a similar problem?

Edit: I'm on to something, the problem appears to happen in this peace of code:

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

Normally the listView replaces to big text items with "dot dot dot" at the end so that they fit on the screen. In my case it still does that, but the text has way to many characters, before the shortening is happening. The result is, that everything scales down. How should I solve this?

score 0 · Accepted Answer · answered Jan 08 '13 at 14:47

Since I got no answers on this one, I post my fix:

Only on mobile safari browsers listView items don't seem to get shortened. Now I'm calling a function which does that manually on 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 + "...";
                }
            }
        }
    }

Still not that happy with my fix, any ideas for improvement are welcomed!

JQueryMobile on Android: Viewport adjusts to Textsize in Listview

1 Answers1