Jquerymobile pages are not fit in Windowsphone screen
Hi,
I have developed the application in Jquery Mobile and the version is 1.4.5.Built the xap file using build.phonegap.com.The application working well in android.But in windows phone 8.1,pages are not fitted well.If we scroll up or down the page, the extra space over the header and footer occurring.And if we landscape the screen,the footer is not fitted well.Attached screen shots.
index.html:
Head:
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<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" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/menu.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.min.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<title>SMS</title>
</head>
config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="net.hello.com" version="1.0.0" xmlns=" http://www.w3.org/ns/widgets" xmlns:gap=" http://phonegap.com/ns/1.0">
<name>Helloworld</name>
<description>
Hello World sample application that responds to the deviceready event.
</description>
<author email=" support@phonegap.com " href=" http://phonegap.com">
PhoneGap Team
</author>
<feature name=" http://api.phonegap.com/1.0/device" />
<preference name="permissions" value="none" />
<preference name="orientation" value="default" />
<preference name="target-device" value="universal" />
<preference name="webviewbounce" value="true" />
<preference name="prerendered-icon" value="true" />
<preference name="stay-in-webview" value="false" />
<preference name="ios-statusbarstyle" value="black-opaque" />
<preference name="detect-data-types" value="true" />
<preference name="exit-on-suspend" value="false" />
<preference name="show-splash-screen-spinner" value="true" />
<preference name="auto-hide-splash-screen" value="true" />
<preference name="disable-cursor" value="false" />
<preference name="android-minSdkVersion" value="7" />
<preference name="android-installLocation" value="auto" />
<icon src="icon.png" />
<icon gap:platform="winphone" src="res/icon/windows-phone/icon-48.png" />
<icon gap:platform="winphone" gap:role="background" src="res/icon/windows-phone/icon-173.png" />
<access origin="*" />
<content src="index.html" />
</widget>
Screen 1,occurred if we scroll up the page,screen 2,occurred when we scroll down the page,screen 3 occurred ,if we lanscape the mobile.Kindly help me to fix this.
I have developed the application in Jquery Mobile and the version is 1.4.5.Built the xap file using build.phonegap.com.The application working well in android.But in windows phone 8.1,pages are not fitted well.If we scroll up or down the page, the extra space over the header and footer occurring.And if we landscape the screen,the footer is not fitted well.Attached screen shots.
index.html:
Head:
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<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" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/menu.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.min.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<title>SMS</title>
</head>
config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="net.hello.com" version="1.0.0" xmlns=" http://www.w3.org/ns/widgets" xmlns:gap=" http://phonegap.com/ns/1.0">
<name>Helloworld</name>
<description>
Hello World sample application that responds to the deviceready event.
</description>
<author email=" support@phonegap.com " href=" http://phonegap.com">
PhoneGap Team
</author>
<feature name=" http://api.phonegap.com/1.0/device" />
<preference name="permissions" value="none" />
<preference name="orientation" value="default" />
<preference name="target-device" value="universal" />
<preference name="webviewbounce" value="true" />
<preference name="prerendered-icon" value="true" />
<preference name="stay-in-webview" value="false" />
<preference name="ios-statusbarstyle" value="black-opaque" />
<preference name="detect-data-types" value="true" />
<preference name="exit-on-suspend" value="false" />
<preference name="show-splash-screen-spinner" value="true" />
<preference name="auto-hide-splash-screen" value="true" />
<preference name="disable-cursor" value="false" />
<preference name="android-minSdkVersion" value="7" />
<preference name="android-installLocation" value="auto" />
<icon src="icon.png" />
<icon gap:platform="winphone" src="res/icon/windows-phone/icon-48.png" />
<icon gap:platform="winphone" gap:role="background" src="res/icon/windows-phone/icon-173.png" />
<access origin="*" />
<content src="index.html" />
</widget>
Screen 1,occurred if we scroll up the page,screen 2,occurred when we scroll down the page,screen 3 occurred ,if we lanscape the mobile.Kindly help me to fix this.
Topic Participants
sramkumarcheetah
jakecigar
jtara-jquery