webpages fits on all android devices - android

I'm developing an android project in which consists of several activities each activity consists of webviews.i used html file and css to achieve this.but my webpages are different in different android devices.i dont want horizontal scrolling,it must automatically adapt to all devices.how is it possible?can any one find me a solution regarding this??
my webview.xml
<WebView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="none"
android:id="#+id/webView" />
my java code
WebView web=(WebView)findViewById(R.id.webView);
web.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
web.loadUrl("file:///android_asset/www/cube.html");
my cube.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>INTRODUCTION</title>
<link rel="stylesheet" href="mystyles.css" type="text/css" />
</head>
<body>
<div class="section">
<h2>CUBE ROOT OF UNITY</h2>
<p>As discussed in the previous section that the cube roots of unity are <mark class= "bold">1, &#x03C9 and &#x03C9<sup> 2</sup></mark> where <mark class= "bold">&#x03C9 =e<sup>i2π/3</sup> = -1/2 + i √3/2 and &#x03C9<sup>2</sup> = e<sup>i4π/3</sup> = -1/2 -i √3/2.</mark> We shall now obtain cube roots of unity by an alternative method.</p>
</div>
</body></html>
and my css file
h2
{
font-family: "Times New Roman",Times,serif;
color: #002671;
font-size: 23px;
font-weight: bold;
border-bottom: 2px solid #CCC;
padding-bottom: 7px;
margin: 24px 0px 0px;
}

You might wanna try putting name="viewport" content="width=device-width, user-scalable=no" in the <meta>-container of the html file. ;)
This shoud resize the document and prevent the user from zooming, so in the end you'll have a document that is scrollable vertically.

Related

Web Page content obscured by Android Soft-buttons. CSS solution?

Trying to view webpage content on my Android phone. The phone has soft-buttons and so the page content near the bottom of the page is partially obscured by the soft-buttons.
Is there a CSS approach to adjust for the possibility of soft-buttons within the mobile web browser? Or does one set some giant margin-bottom value to the content and hope for the best?
Pic: https://i.imgur.com/9qH4s2W.png
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body
{
margin: 0;
padding: 0;
overflow: hidden;
display:flex;
justify-content: flex-end;
flex-direction: column;
width:100vw;
height:100vh;
}
</style>
</head>
<body>
<div class="content">
<img src="https://picsum.photos/100/100">
</div>
</body>

Use one big image for background or multiple ones in Cordova?

I'm building a Cordova app for both iOS and Android so naturally there are a lot of different screen sizes.
Some of my views have a full background image. My question is:
Is is better to use one big image that will cover the largest potential device and just use that for all devices, or use a lot of different images assigning each one to the right device using media queries?
Just looking for best practice here.
I recommend using an image that is 2732 x 2048 (largest iPad screen size today) combined with cover, percentage, or viewport background css sizing. For example:
http://play.ionic.io/app/094f73be9047
css
ion-content {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/6c/Keeny-creek-wv-autumn-waterfall-scenery_-_West_Virginia_-_ForestWander.jpg);
background-size: cover;
text-align: center;
}
ion-content p {
padding: 20px 0;
color: white;
font-weight: 100;
font-size: xx-large;
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-positive" class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
<p>I am so beautiful</p>
<button class="button button-positive">I'm a button</button>
</ion-content>
</ion-pane>
</body>
</html>
Do you have a way to use that image as pattern. Doing that you will not have issues with different screen sizes.

HTML Image is deformed in Cordova/Phonegap App on Android

I'm developing an Android App with Cordova/Phonegap and it works fine! But I've got one problem. On most of the devices my logo at the top looks good and is displayed right:
But on some Android devices is the image deformed:
The Image has the size of 200px x 50px and this size is defined in the HTML img-attribute and in the CSS file, too.
Here is my HTML Code:
<meta name="viewport" content="width=device-width, initial-scale=1">
[...]
<div id="topLogo">
<center><img src="media/images/strikefm-logo-small-top.png" width="200" height="50" /></center>
</div>
Here is my CSS Code:
#topFixed #topLogo {
width:100%;
height:62px;
position:fixed;
top:0;
left:0;
z-index:1;
background-color:#ffffff;
}
#topFixed #topLogo img {
position:relative;
top:9px;
width:200px !important;
height:50px !important;
}
Does anyone knows a solution for this problem?
Thanks!

adjust the webpage to fit any device

Does this tag <meta name="viewport" content="width=device-width; initial-scale=1.0"> works on web applications that works on android? or its just for iphone ?
and this is piece of css code
body
{
padding:20px;
background-color:#ffffff;
font: normal .80em arial, sans-serif;
background-color: #FFCC66;
margin: -10px;
padding: 0px;
width:96%;
}
#wrapper
{
width:100%;
}
the wrapper does not give any result.
Yes it does for for Android and iOS. I added some sources below for those that want to understand this a bit better.
NOTE: Don't just rely on this little HTML tag! Depending on what you're making you may have to use some CSS, or Javascript/JQuery.
You have conflicting code.
I'm sure you know that everything you embed goes into your body. Which is why I'm unsure as to why you set margin to -10px which means everything you embed is going to follow suit.
In addition the default color of the body is set to white which again I'm wondering as to why you added that in addition with two padding properties.
You stated you want the webpage to fit any device. By looking at your code at face value it looks as if you grabbed bits and pieces and put it together without any knowledge as to it itself. The World Wide Web Consortium (W3C) Schools page is a great place to learn the code as they're the ones who work on the world wide web.
Here's some CSS to start out with for what you want to do by making your page responsive.
body {
margin:0;
padding:0;
width: 100%;
height: 100%;
font: normal .80em arial, sans-serif;
}
Now I could be wrong on what I stated before when looking at your code at face value. However if you want a responsive layout while doing Javascript functions. I find using JQuery, and JQuery Mobile to be very handy. It saves massive amount of time coding, and it's built to be responsive so you don't need to write and make sure this div has x padding to match for IE. There's tons of API's available that make using JQuery, and JQuery Mobile easy to use. Everything takes learning so check into this if you haven't.
Here's a good starting code using JQuery and JQuery Mobile.
<!DOCTYPE html>
<html>
<head>
<title>Site Name</title>
<meta http-equiv='Content-Type' charset='utf-8' content='text/html;charset=ISO-8859-1'>
<meta content='yes' name='apple-mobile-web-app-capable'>
<meta content='default' name='apple-mobile-web-app-status-bar-style'>
<meta content='width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css'>
<script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js' type='text/javascript'></script>
<style type='text/css'>
/* CSS Here */
</style>
<script type='text/javascript'>
$(function() {
// JQuery here. If you need help refer to jquery.com
});
</script>
</head>
<body>
<div data-role='page'>
<div class='header' data-role='header'>
<h1>Site Name</h1>
</div>
<div class='content' data-role='content'>
</div>
</div>
</body>
</html>
Sources:
http://www.w3schools.com/
http://jquery.com/
http://jquerymobile.com/
Using the viewport meta tag to control layout on mobile browsers
Stop using the viewport meta tag (until you know how to use it)

android webview css margin-left/right doesn't work

I have some problem with content in webview
Simple webview:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<WebView
android:id="#+id/someWebview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
/>
</RelativeLayout>
Here I call that
WebView webView = (WebView)view.findViewById(R.id.someWebview);
webView.clearView();
webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.loadDataWithBaseURL(null, content, null, "utf-8", null);
and content looks something like this
<!DOCTYPE html>
<html>
<head>
<title>some</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;"/>
<style>
*{margin:0; padding:0;}
html, body{width:100%;}
</style>
</head>
<body>
<p style="width:50%; margin: 50px 0 0 100px; background-color: #0000ff">asdasd</p>
<div style="width: 20%; margin-left: 50px; background-color:#ff0000; padding:0 50px;"><p style="background-color:#ffffff;">dfgdfg</p><div style="width:30%;margin-left: 50px;background-color:#1e1e1e;">dsdsd</div></div>
</body>
</html>
So, problem is what margin-left does not work, but margin-top is ok.. how can I fix this? I can't use android:paddingLeft cause i need margin only some content not all of this
I can't add image to post, so uploaded them here: http://imgur.com/FObDiaA,q9W5tvV
first is desktop browser, second webview
Update
So guess I "solve" problem in my case with parsing html and adding container div's with paddings in places where I need, but this is bad hack and guess not all case can use this, so I think question still open - why margins left/right doesn't work?

Categories

Resources