I am developing a phone-gap application. Phone-gap uses HTML 5, CSS 3 and java script to render html in the default web kit of device. The scenario of the application is that it it show the web page of third party in the IFrame of our app page view.
Before explaining the problem I would like to demonstrate an example here.
See the 1 image here: (copy and paste it in new browser to see image.)
https://d2r1vs3d9006ap.cloudfront.net/s3_images/1042400/1.png?1396949391
The above Image is the default web browser of the android device. I have open a web page in the default browser. You will see that the payment div is smaller than the actual device screen size and adjust it self in this manners.
Now see the 2 image here:(copy and paste it in new browser to see image. )
https://d2r1vs3d9006ap.cloudfront.net/s3_images/1042401/2.png?1396949638
The above Image is the Google Chrome web browser of the android device. I have open a web page in the Google Chrome browser. You will see that the payment div occupying the full device screen size and adjust it self in this manners. I think What is done here is the GWT(Google Web Toolkit) render the received html and render it efficiently by recognizing that the actual html is smaller than the device screen width and implicitly stretch it to the device screen and discard the empty padding.
Now I am coming towards my phone-gap problem. Below is the screen shoot of the my app running in the device.
see the 3 Image below:(copy and paste it in new browser to see image. )
href="https://d2r1vs3d9006ap.cloudfront.net/s3_images/1042403/3.png?1396949903
What is done here? The phone-gap rendered the received html and by help of native web tool kit of android device(as this app is currently testing on android). You can see that the received html div is smaller than the actual screen size(likely to be same as in pic 1). It is not giving the proper look and feel of a mobile application. How can I make it possible that the (image 3) received html to stretch to the full size of device screen. I have edit a image to illustrate you that What I actually wants.
The below Image is my requirement.
This is the 4 image (it is not the actual snap shoot but it is required):
href="https://d2r1vs3d9006ap.cloudfront.net/s3_images/1042406/4.png?1396950380
kindly help me how can I get the Google chrome browser like view in phonegap?
Edit 1:
This is my index.html file code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=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=device-dpi" />
<link rel="stylesheet" href="css/mycss/themes/default/jquery.mobile-1.2.0.css">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<style>
.header{
display:inline-block;
text-align:center;
width:100%;
height:100px;
background: #203864; !important;
}
</style>
<script src="js/myjs/jquery.js"></script>
<script src="js/myjs/jquery.mobile-1.2.0.js"></script>
<script>
function fixiFrame () {
$("#formframe").width($(window).width() );
$("#formframe").height($(window).height() * 0.83 | 0 );
}
</script>
<title>My Test App</title>
</head>
<body>
<div data-role="page" id="main" >
<div data-role="header" class="header" >
Home
</div>
<div id="iFrameDiv" >
<iframe id="formframe" width="100" height="650" src="form.html" onLoad='fixiFrame();' frameborder="0" ></iframe>
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
navigator.splashscreen.show();
</script>
</body>
</html>
and this is form.html file code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=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=yes,
initial-scale=0.5,
maximum-scale=0.5,
minimum-scale=0.5,
width=device-width,
height=device-height,
target-densitydpi=250"
/>
<link rel="stylesheet" href="css/mycss/themes/default/jquery.mobile-1.2.0.css">
<script src="js/myjs/jquery.js"></script>
<script src="js/myjs/jquery.mobile-1.2.0.js"></script>
</head>
<body >
<div data-role="page" id="billPage"><br>
Please Enter the Customer Billing Details
<form id="billForm" method="POST" action="https://ipg.comtrust.ae/SPIless/Registration.aspx" >
<div data-role="fieldcontain" class="ui-hide-label">
<label for="OrderID"> Account Number: </label>
<input type="text" name="OrderID" id="OrderID" value="" placeholder="Account Number"/>
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="Amount"> Billing Amount (USD):</label>
<input type="text" name="Amount" id="Amount" value="" placeholder="Billing Amount (AED)" />
</div>
<input type="hidden" name="OrderName" value="Pizza-Grill" />
<input type="hidden" name="Currency" value="USD" />
<input type="hidden" name="Customer" value="Online" />
<input type="hidden" name="Language" value="en" />
<input type="submit" data-inline="true" data-transition="pop" value="Continue" id="submitButton" onclick="return checkform();" />
</form>
</div>
</body>
</html>
If you provide a little code (source) for the snapshot you put here it would be a lot easier to help you. anyway it seems the page has a fixed width so the only thing that makes the difference between two apps (default browser and chrome for android) is the default zoom settings which on chrome it is set to fit the width of page.
So your question will probably have a similar answer to this one : How to set the initial zoom/width for a webview
It seems like your issue seems to be related to this question/answer.
The issue stems from the viewport meta tag. Since you didn't provide us with any code, I'm going to just assume that your meta tag is wrong.
A lot of tutorials start out with a meta tag of:
<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" />
Which appears to be "Zoomed out" as you are describing.
To fix this, in my projects, I use this meta tag:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
Related
This seems to work great on all PC browsers, and on Mac/iPhone Safari, but no iframe appears on Android Chrome. It should appear half below the bottom, half above... How can I safely achieve bottom positioning?
<html>
<head>
<meta name="viewport" content="initial-scale=1, width=device-width">
</head>
<body>
<table width="700"><tr><td>Test</td></tr></table>
<iframe src="http://www.ibm.com"
style="position:fixed; left:0px; width:600px; bottom:-200px; height:400px;">
</iframe>
</body>
</html>
(This is actually a simplification of much bigger code that has the same problem. Please help...)
I have created a mobile app using jQuery Mobile and PhoneGap. When I run the app on a Windows Phone 7 emulator, it displays at the expect width.
http://post.robfine.com/jqueryapponwindowsphoneemulator.png
However, when I create an apk and test the app out on my android device, it displays at a much larger width.
http://post.robfine.com/jquerymobileappsowideandroid.jpg
From my research, everything points to the viewport metatag, which I already have handled.
<!DOCTYPE html>
<html>
<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" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Circle of Death 2.0</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="cordova-2.7.0.js"></script>
<script type="text/javascript" src="js/GameLib.js"></script>
</head>
<body>
<div class="app" id="deviceready">
<div data-role="page" id="page1">
<div data-role="content">
<div>
<img src="img/CircleOfDeath2Title.png" alt="Circle of Death" width="100%" />
</div>
<div style="text-align: center; padding: 10px;">
<img src="img/cardback.png" alt="Card Deck" onclick="DrawCard();" id="CardDeck" />
</div>
<div>
<h2 id="RuleTitle" style="margin:0px;"></h2>
</div>
<div>
<span id="Directions"></span>
</div>
</div>
</div>
</div>
</body>
</html>
Has anybody else seen this issue when using PhoneGap and jQuery Mobile?
Thanks in advance.
You have a lot of stuff in your viewport tag, my phonegap apps work fine in android just with the following viewport tag:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
I have a Samsung galaxy Note 2, I use chrome browser to display a web page with a top <div> having a width of 1280px.
As the galaxy note 2's screen is 1280px wide, I was expecting to have the whole page to be displayed at full width at once.
But it is not the case, instead, something about 980px is being displayed : I have to unzoom to see the whole page width. And it is getting very boring because, on every page, I have to unzoom again and again.
I tried something like that into the header:
<meta name="viewport" content="width=device-width, initial-scale=1" />
It modified something, but it is worse : looks like to display only about 640px out of my 1280px
EDIT, here are 2 html pages to test that :
--> When I display test.html, I can see only the green color, not the red. (I have to unzoom to see both color)
test.html :
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div style="background-color:red; width: 1280px">
<div style="background-color:green; width: 980px">
hello world
Go next page
</div>
</div>
</body>
</html>
test2.html :
<html>
<head>
</head>
<body>
<div style="background-color:blue; width: 1280px">
<div style="background-color:yellow; width: 980px">
houston we have a problem
Go prev page
</div>
</div>
</body>
</html>
I made 2 pages because when switching from one to the other, the scale is not persistent : even if I unzoom to fit the screen on test.html, I have to unzoom again for test2.html
How can I proceed to get my 1280px at once and for all my web pages ?
Try setting width to 100%
<meta name="viewport" content="width=100%, initial-scale=1" />
EDIT:
You could also try this:
test.html
<html>
<head>
<meta />
</head>
<body>
<div style="background-color:red; width: 100%">
<div style="background-color:green; width:80%">
hello world
Go next page
</div>
</div>
</body>
</html>
test2.html
<html>
<head>
</head>
<body>
<div style="background-color:blue; width: 100%">
<div style="background-color:yellow; width: 80%">
houston we have a problem
Go prev page
</div>
</div>
</body>
</html>
Percentage should take your device width automatically.
Thought i ran into the same problem, because i had a top that was 100% width, and then i saw it on my mobile, it had cut into the centering wrapper and the content that was in that.
Solution to that for me was to set min-width on the outer part, so if you dont have any outer div, set min-width on body.
We have a large proprietary MRP system based on 4D.
We are creating a very simple web page served by 4D that has a text box.
How do I convince iphones and androids to make the text box the width of the screen, so the user does not have to manually zoom?
<!DOCTYPE html>
<HTML>
<HEAD>
<style type="text/css">
</style>
</HEAD>
<META NAME="GENERATOR" CONTENT="4th Dimension - 4D">
<TITLE> Real Time Collection
</TITLE>
<BODY>
<FONT size="5";bold>
<FORM ACTION="/ProcessJobHours" METHOD=POST>
Employee ID#<BR>
<INPUT TYPE=TEXT NAME=Emp VALUE="" style="height: 48px; width: 250px;
font-size: 24pt;"><BR>
<!-- OK is a particular case-->
<INPUT TYPE=SUBMIT NAME=WEBOK VALUE="Ok">
</FORM>
</BODY>
</HTML>
What I get is:
What I want is:
I think the viewport suggestion by Alex B is a good start. Try adding this to your the section of your HTML.
<meta name="viewport" content="width=device-width, initial-scale=1">
I believe what you are looking for on mobile rendering of a web page is called viewport. I think this blogpost clarifies it fairly well.
http://bravenewmethod.wordpress.com/2011/08/28/html5-canvas-layout-and-mobile-devices/
i used below content in html page
<html>
<head>
<title>Example</title>
<meta name="viewport" content="
width=device-width,
height =800px,
user-scalable=no" />
</head>
<body>
<img border="0" src="./happy_holi.jpg" alt="Pulpit rock" height="400px"
width="300px">image1</img>
</body>
</html>
iam displaying it in web view.
my problem is, if i do changes for meta tag height and width property no changes is happening in web view. why?
If you want to see some changes, you should change the img height property, or maybe your webview width and height. (maybe you should post apart of xml file)
<img border="0" src="./happy_holi.jpg" alt="Pulpit rock" height="800px" width="600px">image1</img>
The meta tag contain only informations for your bowser...