jquery - Mobile site - on native android browser doesn't resize right (and can't always get keyboard focus), does on Chrome -


the layout our new mobile site, when viewed on android phones, works fine in chrome not in native android browser or dolphin.

(note: not coder, i'm troubleshooter, don't know why choices made)

problem 1: layout isn't @ proper zoom. page displays wider window. can zoom out proper zoom, it's not being automatic should be.

problem 2: clicking doesn't lead focus i'm supposed able click on icon on landing page taken login page. can, happens after i've been frustratedly tapping @ same point while. , then, if manage login page, tapping on input fields doesn't bring keyboard. (it highlight box in blue, indicating part of action has been recognized). in other words, can't log in (and can't other symptoms elsewhere in site).

needless say, rather large blocker, both usability , testing.

i've been doing lot of research, , trying variety of things (like setting initial-scale and/or maximum-scale 1), no luck yet. i'm 2 steps away introducing android phone sledgehammer, seemed time ask help.

details - site built in backbone jquery. - mobile detection done using Șerban ghiță's mobile detect (mobiledetect.net)

part of mobile detection code:

<?php if ($is_ios) { if ($devicetype=="tablet" ) { ?>    <meta name="viewport" content="width=1024,user-scalable=no" /> <?php } else { ?>    <meta name="viewport" content="width=640,user-scalable=no" /> <?php } } else { if ($devicetype=="tablet" ) { ?>    <meta name="viewport" content="width=device-width; initial-scale=0.666667;       maximum-scale=0.666667; user-scalable=0">    <meta name="viewport" content="width=device-width"> <?php } else { ?>    <meta name="viewport" content="width=640,user-scalable=no" />    <meta name="viewport" content="width=device-width"> <?php } } ?> 

i'm not sure bits of css useful, haven't seen helpful when i've gone through code, i'm not sure i'm looking (and boy miss firebug , various "click on element , see css is" tools web)

about vaguely relevant difference between chrome , dolphin/native android browser i've found (but isn't actual relevant one) that, using www.portvie.ws tool (from http://www.propublica.org/nerds/item/adaptive-design-fixed-widths-and-tablets), chrome thinks device width 320 x 534, while other 2 browsers think it's 480x800.

am @ least looking in right direction source of problem?

thank in advance help.

this turned out related scale/zoom. found 2 solutions problem:

1) when setting viewport, width=device-width; and, android phones, set minimum , maximum scale 0.5. solved layout problem, not focus problem (but did narrow focus problem down that, of phones tested, problem on phone running android 4.0.4)

2) android phones, set zoom 0.5. fixed focus problem, made font size unreasonably small, went first solution.

hope our adventures can else...


Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -