css - Can't stop Blackberry Screen Vertically Scrolling in phonegap -
hi, have developed screen using jquery mobile blackberry using phonegap. when deploy device screen scrolls vertically shown in image below. tried same html,css,js combination android device phonegap project , doesn't scroll @ all. seems scrolling vertically in blackberry. there way disable vertical scroll bars in blackberry in phonegap project ?. horizontal scrolling disabled though.
any regard highly appreciated. using dreamweaver design ui , js. , using command line(terminal) build , deploy blackberry device.
my code shown below :
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" id="viewport" content="width=device-width, height=device- height,initial-scale=1.0, maximum-scale=1.0,user-scalable=no;"/> <title>jquery mobile web app</title> <link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/> <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="css/style.css"/> <script type="application/javascript" src="js/application.js"> </script> <style type="text/css"> #page{ overflow: hidden; } </style> <script type="application/javascript"> $(document).ready(function(e) { var width = $(window).width(), height = $(window).height() - $("#header").height(), row = height / 2, icontopspace = (number(row) - 50) / 2; $("div ul li a").attr("style", "height:"+row+"px"); $(".ui-btn-inner").attr("style","margin-top:"+icontopspace+"px"); }); </script> </head> <body> <div data-role="page" id="page"> <div data-role="header" id="header"> <h1>our workplace</h1> </div> <!-- blackberry higher screen width --> <div data-role="navbar"> <ul> <li><a href="ourworkplace.html" data-transition="slide" data-iconpos="bottom" data-icon="our-workplace">our workplace</a></li> <li><a href="b.html" data-transition="slide" data-iconpos="bottom" data-icon="find-your-way" onclick="test()">find way</a></li> <li><a href="b.html" data-transition="slide" data-iconpos="bottom" data-icon="technology">technology</a></li> </ul> </div> <div data-role="navbar"> <ul> <li><a href="a.html" data-transition="slide" data-iconpos="bottom" data-icon="have-an-idea">have idea</a></li> <li><a href="b.html" data-transition="slide" data-iconpos="bottom" data-icon="useful-links">useful links</a></li> <li><a href="b.html" data-transition="slide" data-iconpos="bottom" data-icon="help-desk">help desk</a></li> </ul> </div> </div> </body> </html>
add following viewport content : target-densitydpi=device-dpi
Comments
Post a Comment