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.
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 am very new to Phonegap. I am developing an app for display some text contents(some times images) from web. I want to add a zooming option to the app(only for content). When I am enabling pinch zoom, it zooms the entire webview(including the action/title bar). I want to zoom only the content part. I used IScroll, but couldn't work. Please help me.
I am giving my code below. If any problem, please let me know.
<!DOCTYPE html>
<html ng-app="nakApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Daivadasakam</title>
<meta name="description" content="">
<link rel="stylesheet" href="assets/app.css"/>
<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=yes">
</head>
<body>
<div ui-view></div>
<!-- injector:js -->
<script src="vendor/jquery.js"></script>
<script src="vendor/angular.js"></script>
<script src="vendor/angular-ui-router.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/home.js"></script>
<script src="app/services/servive.js"></script>
<script src="app/router.js"></script>
<script src="app/filters/interpolate.js"></script>
<script src="app/directives/directives.js"></script>
<script src="app/controllers/language-selector.js"></script>
<script src="app/config-generated.js"></script>
<script src="app/controllers/data-content.js"></script>
<!-- endinjector -->
</body>
</html>
There is another file on www/app/templates. data-content.html(Assuming that it is the template for data display). I am giving the code below
<div class="continter">
<div ng-include="" src="'app/templates/header.html'"></div>
<div class="list-data-language">
<div class="title">{{vModel.title}}</div>
<div class="content" ng-bind-html="vModel.content"></div>
<div ng-show="vModel.isAudio" class="list-item" ng-click="vEvents.playAudio(vModel.audio_url)" >
<label>Play Audio</label>
</div>
<div ng-show="vModel.isVideo" class="list-item" ng-click="vEvents.playAudio(vModel.video_url)" >
<label>Play Video</label>
</div>
</div>
</div>
<div class="loader" ng-show='vModel.isLoaderOn'></div>
If I understood you correctly, what you want is to have a div that's size doesn't change when the zoom is applied on it, right?
Main idea
You simply make fixed-size div (#container) that contains another div (#content) which again contains the actual content. The container is always the same size, only the content div changes size based on it's content. The container can handle the overflow anyway it wants such as auto (show scroll bar when too wide or long content) or hidden.
<div id="container">
<div id="content">
<!-- Content here -->
</div>
</div>
Then apply CSS3 transform on the content when zoomed. For example's sake the transforms are applied on when hovering the content but for your case see my comments below the code. What is basically done when hovering is the zooming part (scale transformation) with factor of 2 in this example and then it is moved (translate transformation) to start from top-left corner.
#container {
width: 600px;
height: 600px;
top: 100px;
left: 100px;
position: absolute;
overflow: auto; // Or hide or scroll or what you prefer
}
#content {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: gray;
}
#content:hover {
transform: scale(2) translate(25%, 25%);
}
Example
I made JSFiddle for you to play with it. Please note that the hover effect is used only for the example to be more compact. Also I am not much of a CSS guru so there probably is still some minor problems. Also for actually using that code, consider adding the -webkit-transform, -moz-transform, -o-transform and -ms-transform to make it work on all possible browsers.
How to zoom
What comes to the how to zoom (pinch or Google Maps style zoom buttons), it mostly just depends what you want to do with this. For example if you prefer the pinch hand gesture, look into this. On my example it was most easily showed with hover. I think you need to anyway use JavaScript to make the zooming since you cannot set the multiple values for zoom level on CSS.
Apply on your actual code
In case that the code added by you to your original question is your template, and if the div with list-data-language class is for example the one that you want to be zoomable, your code should look something like this
<div class="continter">
<div ng-include="" src="'app/templates/header.html'"></div>
<div id="container">
<div id="content" class="list-data-language">
<div class="title">{{vModel.title}}</div>
<div class="content" ng-bind-html="vModel.content"></div>
<div ng-show="vModel.isAudio" class="list-item" ng-click="vEvents.playAudio(vModel.audio_url)" >
<label>Play Audio</label>
</div>
<div ng-show="vModel.isVideo" class="list-item" ng-click="vEvents.playAudio(vModel.video_url)" >
<label>Play Video</label>
</div>
</div>
</div>
</div>
<div class="loader" ng-show='vModel.isLoaderOn'></div>
As you can see I added one div with id container and added id content to for div with class list-data-language.
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.
My problem with this very basic piece of code is that the top-header doesnt take the full width on an android chrome browser.
If I remove the width on the page-width, the top-header takes full width... But i need to set the width!
How do i make it so the top-header takes full width?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<!-- TOP HEADER -->
<div id="top-header">
<div id="nav" class="page-width">
test
</div>
</div>
<!-- CONTAINER -->
<div id="container" class="page-width">
test
</div>
</body>
</html>
/********** TOP-HEADER **********/
#top-header {background:#719bb5 url(../images/layout/bg_header.png) repeat-x left bottom; border-bottom: 1px #5E7D99 solid; height:59px;}
#container {background-color:red;}
/* classes */
.page-width {width:1000px; margin:0 auto; padding:0 10px;}
EDITED:
added image of what it looks like on my android chrome browser
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/