I have a problem with displaying a long very word in WebView. I don't want to scroll horizontally and zoom in/out. I just want the word to break if it's necessary (like <body style="word-wrap: break-word;">).
This is my simple html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css" style="">
<!--
p
{margin-top:0;
margin-bottom:0}
-->
</style>
</head>
<body style="word-wrap: break-word;" dir="ltr" style="font-size:12pt; color:#000000; background-color:#FFFFFF; font-family:Calibri,Arial,Helvetica,sans-serif">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br></p>
</body>
</html>
my settings for WebView:
mMessage.getSettings().setLoadWithOverviewMode(true);
mMessage.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.TEXT_AUTOSIZING);
xml:
<WebView
android:id="#+id/email_message"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
This is working if I have a normal text (with spaces) but with this text, it is shown in one line and horizontal scrolling is enabled. I was checking default android email client and the same mail is shown correctly (word breaks)
Any ideas how to achieve the same result?
try this solution, from How to force table cell <td> content to wrap?:
/* css-3 */
white-space: -o-pre-wrap;
word-wrap: break-word;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
Related
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>
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.
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, ω and ω<sup> 2</sup></mark> where <mark class= "bold">ω =e<sup>i2π/3</sup> = -1/2 + i √3/2 and ω<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.
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 have this webview with a Form, when I clicked on a textbox to type, this is what's happening:
I have this on my html form:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
I'm using samsung galaxy tab 2, android ice cream sandwich. I have the same experience on honeycomb.
I tried adding:
-webkit-transform: translate3d(0,0,0);
on the container and/or the input element itself, but nothing worked.
Thanks for any ideas on how do I fix this!
EDIT:
My html:
<td class='valign_top' style='width:30%; -webkit-transform: translate3d(0,0,0);'>
<div class='cell_lbl'>P.O. Number:</div>
<input type='text' name='po_number' id='po_number' style='width:100%;' />
</td>
When I tried it in built in browser, IT'S FINE.
You should try to apply this:
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color: rgba(255,255,255,0);
or this:
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color:#3072af;
to your input box elements.