autosize screen in phonegap

Question

I use this meta parameters and javascript for try autosize

<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, height=device-height, 
target-densitydpi=device-dpi" />

Whith this parameter i cannot resize screen , and in one Samsung S4 see screen very small. I try resize screen with javascript and aperance is bether

      <script type="text/javascript">
            function resolution_handling() 
    {
        //first way to implement
        browser_width = $(window).width();
        browser_height = $(window).height();
        $("#page1").css("width":browser_width+"px");
        $("#page1").css("height":browser_height+"px");

        //second way to implement
        browser_width = screen.width;
        browser_height = screen.height;
        $("#page1").css("width":browser_width+"px");
        $("#page1").css("height":browser_height+"px");
        }
    </script>

But with this script footer is showed follow element not is showed in botton of page.

What it's the best method for resize screen is with this javascreipt?
How i can put footer in botton of page?

resize _content_ div, http://stackoverflow.com/a/21553307/1771795 — Omar, Apr 14 '14 at 16:08
btw, `.css({width: value})` or `.css(width, value)`. Another way, `.height(value)` `.width(value)`. — Omar, Apr 14 '14 at 16:17

score 0 · Answer 1 · answered Apr 14 '14 at 16:10

0

Here's what I use and screen is auto-sized depending on the device's size and dpi an portrait/landscape :

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

I think your issue comes from the user-scalable=yes.

answered Apr 14 '14 at 16:10

QuickFix

11,661
2
38
50

`user-scalable` is to allow/disallow user to zoom in/out. – Omar Apr 14 '14 at 16:16
yes I agree, but doesn't it break the "autosizing"? – QuickFix Apr 14 '14 at 16:27

score 0 · Accepted Answer · answered Apr 14 '14 at 16:19

0

Add target-densitydpi=medium-dpi to your meta tag, that will fix your problem for high resolution screens like Samsung S4

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />

NO JAVASCRIPT NEEDED

answered Apr 14 '14 at 16:19

beRoberto

134
6

target-densitydpi should be avoided since this forces Chrome 30 (What Android 4.4.2 uses on the Samsung Galaxy S4) into "Legacy" mode and makes it more janky. – Joe B Apr 14 '14 at 21:11
Can you please provide your suggestion on how to fix the issue I know it's more "janky" but it's the only thing that fixed it for me. Setting width and height with javascript implies that you only use the app in one mode (portrait or landscape) otherwize you have to call the function every time the screen resizes. – beRoberto Apr 15 '14 at 16:08
Don't use the target-densitydpi meta tag at all. The WebView on Android 4.4.2 should automatically resize it to the correct widths and heights for that view, which is generally the same as what you do when you set your target-density to medium. – Joe B Apr 15 '14 at 21:57

autosize screen in phonegap

2 Answers2