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...)
Related
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" />
I have a very unusual bug that appears on my Android 4.0 on Galaxy Note. Some friends see the same on their Galaxy S3. I simplified my code to the following:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=no" />
<style type="text/css">
#movieplayer {width:100%; position:fixed; top:0px; left:0px; right:0px; bottom:0; background:yellow; z-index: 90;}
.player, .project-info {width:100%}
#movieplayer .short-info {width:100%;background:green;display:block;position:relative;}
</style>
</head>
<body class="works">
<div id="global-container">
<div id="movieplayer">
<div class="player">
<div class="project-info movie">
<div class="short-info jspScrollable">
<div class="container">
hello
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
When you first load up this page in PORTRAIT, you should see a green bar on top of a yellow background. They both fill the screen width 100%. When you rotate the phone to landscape, the yellow continues to fill the rest of the screen, but the green bar fails to fill the remaining width. Why is this?
I am using #movieplayer{position:fixed;} here because in my real code, I rely on that to do some other stuff. So I can't use position:absolute.
This issue seems like a bug in certain versions of the android browser.
The set of elements under the fixed-position container aren't asked to recalculate their width (during reflow) as a result of the resize event.
Your solution works, as it is one of several ways to force this recalculation to occur.
Oddly enough, we've found that any landscape-specific media query in css fixes it for us.
(tested on Galaxy S3):
#media screen and (orientation: landscape){
.doesnt-exist { background:red; }
}
Related links :
Android Issue 27959
Android Issue (dup) 25610
OK, I was able to hack a solution together. I have jquery installed, and then I did a
$('.short-info').css('position','absolute');
setTimeout("$('.short-info').css('position','');", 0);
This is ugly, but it works.
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'm trying to present a simple message to the user in my mobile website.
I want the message size approximately will be the same on mobile devices with similar screen size, for example iPhone and Samsung Galaxy (android).
I read a lot of posts on this issue, and many recommended to use -webkit-text-size-adjust: 100% to make it happen. But I didn't understand how to use it...
The webpage:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html { -webkit-text-size-adjust:100%; }
</style>
</head>
<body>
<div style="text-align:center;font-size:6em;-webkit-text-size-adjust:100%;">
Hello World!
</div>
</body>
</html>
The result:
Did you test the viewports meta?
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, height=device-height"/>