Android- Phonegap device width getting different values

Question

I am developing an application in phonegap android.

I am trying to get the device width on device ready. I tried this code.

First time when application starts its giving (480, I am using samsung i9003 ) width ( alert ) and when I hit the backbutton and again running application its showing 320.

I has been stucked here .. please help

<!DOCTYPE HTML>
<html>
<head>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <meta name="viewport" content="width=device-width; user-scalable=no" />
        <link rel="stylesheet" href="css/jquery.mobile-1.1.1.css" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Title</title>
    </head>
<body onload="onLoad()">


<div class="logo"></div>
<div class="content">
<div id="justt"></div>
</div>


        <script type="text/javascript" src="cordova-2.2.0.js"></script>
        <script src="js/jquery.js"></script>

  <script type="text/javascript" charset="utf-8">


    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }


    function onDeviceReady() {

    var width=0;
    width=$(window).width()

    $('#justt').css('width',(width)+'px');
    alert(width);
    }

    </script>



</body>
</html>

If you are trying to create a div to set according to the mobile window you could jQuerymobile.js jquerymobile.com/download to create a div with different functionality according to the mobile window. — Sathya Raj
– Sathya Raj, Commented Dec 10, 2012 at 13:15
Hi thanks for the reply and set according to your comment and place a main div ( named '.main') and take its width in javascript but first time its giving 480px. When I close the application and reopen its giving '320px' My code like var width=$('.main').css('width'); alert(width); — ramesh
– ramesh, Commented Dec 11, 2012 at 3:33
i am not a css person if u tell me what are u trying to achieve from this functionality i could suggest more acc answer. — Sathya Raj
– Sathya Raj, Commented Dec 11, 2012 at 13:34

Gajotres · Accepted Answer · 2012-12-13 07:37:24Z

1

Why don't you try to get a page content width:

var screenWidth = 0;
$(window).bind('resize', function () {
    screenWidth = $('[data-role="page"]').first().width());
}).trigger('resize');

This will give you page content width, even if page is resized.

You won't always get perfect results while getting viewport screen dimensions ($(window).width()), different devices behave differently.

$(window).width() and $(window).height() will give you the viewport dimensions, not the screen dimensions. Here you will find detailed overview of this problem.

edited Dec 13, 2012 at 7:37

answered Dec 11, 2012 at 13:49

Gajotres

57.3k16 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Android- Phonegap device width getting different values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related