I have a 1513x1079 image which resizes great when I resize my desktop browser.
However, when I open the same webpage on my android phone, everything shows up great, except the image. The whole page resizes properly, but there is no picture. There is only a tiny picture icon in the upper left corner.
Is there some upper limit to image dimensions for phones?
If so, why is there such a limit?
Does image responsiveness have some sort of dimension limit?
HTML Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name = "viewport" content = "width=device-width, initial-scale = 1"/>
<title>Projects web page</title>
<link rel="stylesheet" href="bootstrap.min.css"/>
<script src="jQuery-3.3.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "container-fluid">
<div class = "row">
<div class = "col-md-6" id = "picture">
<img src="R1lr_cut.jpg" alt = "R1 Engine" class = "responsive"/>
</div>
<div class = "col-md-6" id = "home_text">
<h1>Inline 4 Engines</h1>
<ul id = "links">
<li>Home</li>
<li>Details</li>
<li>Calculate</li>
<li>About</li>
</ul>
<div id = "filler_text">
<h4>Historic information</h4>
<p>
The first across-the-frame 4-cylinder motorcycle was the 1939 racer Gilera 500 Rondine, it also had double-over-head camshafts, forced-inducting supercharger and was liquid-cooled.
</p>
<p>
Modern inline-four motorcycle engines first became popular with Honda's SOHC CB750 introduced in 1969, and others followed in the 1970s.
Since then, the inline-four has become one of the most common engine configurations in street bikes.
</p>
<p>
Outside of the cruiser category, the inline-four is the most common configuration because of its relatively high performance-to-cost ratio.
</p>
<p>
The success of the Honda CB750 and the Kawasaki Z1 got the attention of the Germans over at BMW. The Honda especially had been an industry game changer.
BMW’s motorcycle engine at that time was a horizontally opposed “boxer” twin cylinder engine that the company had settled on when they reverse engineered a British Douglas motorcycle with a boxer engine mounted longitudinally in the frame at the end of the First World War.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Code :
body {
background-color: #000000;
}
.responsive {
width:100%;
height: auto;
}
#picture {
padding-right: -10%;
padding-top: 3%;
width: 100%;
}
#links li{
list-style-type: none;
float:left;
/*outline : 1px solid yellow;*/
width: 14%;
margin-right: 11%;
padding-top: 0.5%;
padding-bottom: 0.5%;
}
#links{
/*outline: 1px solid red;*/
width: 100%;
padding-left: 0.5%;
}
a {
/*outline :1px solid green;*/
display: block;
text-align: center;
padding: 3%;
color: #666666;
}
a:hover {
background-color: #333333;
color:#66ccff;
}
#home_text {
background-color: black;
padding-top: 8%;
color: #FFFFFF;
padding-left: 0%;
}
#home_text h1 {
margin-left: 5%;
/*outline: 1px solid purple*/
}
#filler_text {
padding-top: 12%;
margin-left: 5%;
}
Make sure your image size is set in percents, not in pixels or anything else.
Example:
<img src="yourimage.png">
<style>
img{width: 100%; /*100 can be any, but will fit 100% of the block*/}
</style>
You can also make your image a block background: `
myimg{background-image: url(“pic.jpg”); background-size: cover;}
Sorry if syntax is wrong, just typing from my phone. Also you can try doing like this instead of making it a block:
img{display: inline-block;}
`
If this doesn’t help change inline-block to block.
An application I developed uses locally stored HTML to be shown in a webview.
It has always worked without any issue, but on Android 7 the HTML source is displayed instead of formatting the HTML.
The code for loading the HTML is as simple as this
var webView = view.FindViewById<WebView>(Resource.Id.webview);
webView.LoadUrl("file:///android_res/raw/info.html");
The content of the HTML is also very straightforward.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name = "viewport" content = "width=device-width">
<title></title>
<style>
body {
font-family: "Helvetica", sans-serif;
font-size: .85em;
padding-top: 25px;
}
body a {
color: #697782;
font-weight: bold;
}
h1 {
font-size: 1.15em;
text-transform: uppercase;
color: #24292f;
margin: 8px 0 8px;
padding: 0px;
}
strong {
color: #697782;
font-weight: bold;
}
p {
color: #2b2c30;
margin: 0 0 8px;
padding: 0px;
}
</style>
</head>
<body>
</body>
</html>
I'm not using Webview.LoadData, because reading the HTML will require to add it as Asset and not Resource, which I'm not going to do. (localization)
Anyone any idea's how to tackle this?
Oké. I found a solution after a lot of trial/error.
A lot of online solutions advice to move the files to the Assets folder and read the file content from there because it wasn't clear for a lot on how to read text file info from RAW folders. But I don't want to do this because the Assets folder isn't Localization-aware.
The files with HTML I want to show are Localized
/raw/info.html
/raw-fr/info.html
/raw-nl/info.html
In my previous solution I called the content with
webView.LoadUrl("file:///android_res/raw/info.html");
Which worked perfectly until Android 7 decided to show the source HTML in the browser. The correct file for the current OS language would be selected in this way. No need to write any Localization handling yourself.
The working solution
Consists of loading the string data from the file and feed it to the WebView via WebView.LoadData().
//get the Resource ID
var dd = Resource.Raw.info;
//read the file content from RAW folder
var content = LoadFile(dd);
//feed it to the webclient
// important: UTF-8 capitalized!
webView.LoadData(content, "text/html; charset=UTF-8", "UTF-8");
The LoadFile looks like this
public string LoadFile(int resourceId)
{
//get the file as a stream
var inputStream = Resources.OpenRawResource(resourceId);
var html = string.Empty;
using (StreamReader sr = new StreamReader(inputStream))
{
html = sr.ReadToEnd();
}
return html;
}
In sample code html where use the tag details when the html code is read via html viewer in android enviroment doesn't work properly.
The first tag details works fine, but the second tag and son on...doesn't work properly.
The collaps/expande remain always in the content "+".
below the html code
`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0, width=device-width" />
<style>
summary {cursor: pointer; font: bold 1em Arial, Helvetica, sans-serif; padding: 8px 0; position: relative; width: 100%; }
summary::-webkit-details-marker {display: none}
summary:after{background: darkblue; border-radius: 5px; content: "+"; color: #fff; float: left; font-size: 1.5em; font-weight: bold; margin: -5px 10px 0 0; padding: 0; text-align: center; width: 30px;}
details[open] summary:after {content: "-";}
</style>
</head>
<body>
<header>
<details>
<summary>
Sample 1
</summary>
<p>In few simple steps (see below), you can download and perform the registration. sdjsadjaksjdaskjdasddasdasd Incoming and Outgoing Calls are shown and the Error messages are explained.sadiaus sadasdjasdjasl sdadjaskdjaslkdjsajdlaskjdlasjdsajd sdfahjahdj</p>
</details>
<details>
<summary>
Sample 2
</summary>
<p>In few simple steps (see below), you can download and perform the registration. sdjsadjaksjdaskjdasddasdasd Incoming and Outgoing Calls are shown and the Error messages are explained.sadiaus sadasdjasdjasl sdadjaskdjaslkdjsajdlaskjdlasjdsajd sdfahjahdj</p>
</details>
</header>
</body>
</html>`
I'm trying to use a customized Roboto font for Arabic but fail to get it rendered properly in a PhoneGap/Android application:
On Galaxy ACE (Android 2.3.2), my application renders properly Arabic characters (see image#1).
On Galaxy S3 and S4 (Android 4.3), my application renders Arabic characters using the default font (see image#2).
Image#1
Image#2
html page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#font-face {
font-family: 'ArabicFont';
src: url("fonts/KacstTitle.ttf") format("truetype");
}
#font-face {
font-family: 'LatinFont';
src: url("fonts/DejaVuSerif.ttf") format("truetype");
}
.arabicText {
font-family: ArabicFont;
direction: rtl;
}
.latinText {
font-family: LatinFont;
direction: ltr;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div id="libreOfficeRendering" class="center">
<hr/>
<label>LibreOffice Rendering</label>
<hr/>
<img src="images/libreOfficeRendering.png">
</div>
<br/>
<br/>
<div id="googleChromeRendering" class="center">
<hr/>
<label>Google-Chrome Rendering</label>
<hr/>
<img src="images/googleChromeRendering.png">
</div>
<br/>
<br/>
<div id="androidAndPhoneGabRendering" class="center">
<hr/>
<label>Actual Rendering</label>
<hr/>
<pre class="arabicText">أنا نص بحروف عربية (KacstTitle).</pre>
<pre class="latinText">I'm a text in Latin characters (DejaVu Serif).</pre>
</div>
</div>
</body>
</html>
Try testing something like this to see if it is possibly an issue with <pre> tags and/or html:
<span class="arabicText">أنا نص بحروف عربية</span>
<pre class="arabicText">أنا نص بحروف عربية</pre>
<span class="arabicText">أنا نص بحروف عربية</span>
<pre class="arabicText">أنا نص بحروف عربية</pre>
If any of those render correctly on the device in question maybe it can help narrow down the issue.
Another possibility is a strange thing I encountered recently where in certain browsers (seemingly at random), fonts defined by #font-face would not render unless I formatted the font-family name exactly the same including punctuation when using it later. So you could try wrapping the font-family in quotes in all instances:
#font-face {
font-family: 'ArabicFont'; /* has quotes */
src: url("fonts/KacstTitle.ttf") format("truetype");
}
.arabicText {
font-family: 'ArabicFont'; /* has quotes */
direction: rtl;
}
Or removing quotes in all instances:
#font-face {
font-family: ArabicFont; /* no quotes */
src: url("fonts/KacstTitle.ttf") format("truetype");
}
.arabicText {
font-family: ArabicFont; /* no quotes */
direction: rtl;
}
Hopefully one of those will help you out. Last thought - is there possibly a capitalization difference in the file name between what you are referencing and how it's actually saved?
I tried to make custom fonts for my application. For that, I wrote this code in my html file:
<style type="text/css" media="screen">
#font-face {
font-family: centurySchoolbook;
src: url(/fonts/arial.ttf);
}
body {
font-family: centurySchoolbook;
font-size:30px;
}
</style>
In my Html Body:
<body onload="init();">
<h>Custom Fonts</h>
<div>This is for sample</div>
</body>
But, these styles are not applied to my html body..
Any help to solve this..??
I made it work after doing the following steps:
-Put your CSS in a file, for example my_css.css:
#font-face {
font-family: "customfont";
src: url("./fonts/arial.ttf") format("opentype");
/* Make sure you defined the correct path, which is related to
the location of your file `my_css.css` */
}
body {
font-family: "customfont";
font-size:30px;
}
-Reference your CSS file my_css.css in your HTML:
<link rel="stylesheet" href="./path_to_your_css/my_css.css" />
Pay attention to the definition of your paths!
For example, let's say you have the following directory structure:
www
your_html.html
css
my_css.css
fonts
arial.ttf
Then, you would have:
#font-face {
font-family: "customfont";
src: url("../fonts/arial.ttf") format("opentype");
/* Make sure you defined the correct path, which is related to
the location of your file `my_css.css` */
}
body {
font-family: "customfont";
font-size:30px;
}
and:
<link rel="stylesheet" href="./css/my_css.css" />
Note: if you use jQuery Mobile, the solution may not work (jQuery Mobile will "interfere" with the css...).
So, you may try to impose your style by using the style attribute.
Eg:
<body>
<h>Custom Fonts</h>
<div style="font-family: 'customfont';">This is for sample</div>
</body>
One drawback is that it seems that the style cannot be applyied on body...
So, if you want to apply the font to the whole page, you may try something like this:
<body>
<!-- ADD ADDITIONAL DIV WHICH WILL IMPOSE STYLE -->
<div style="font-family: 'customfont';">
<h>Custom Fonts</h>
<div >This is for sample</div>
</div>
</body>
Hope this will work for you too. Let me know about your results.
Below works like charm for custom font with jQueryMobile and Phonegap:
#font-face {
font-family: "Lato-Reg";
src: url("../resources/Fonts/Lato-Reg.ttf") format("opentype");
/* Make sure you defined the correct path, which is related to
the location of your file `my_css.css` */
}
body *{
margin: 0;
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
font-family: "Lato-Lig" !important;
font-weight: normal !important;
}
I also faced the same problem. I put my css file in the css folder. I put the ttf file in just the www folder and it didn't work properly, so I moved my ttf file into the css folder. Here is my code:
#font-face
{
font-family: CustomArial;
src: url('arial.ttf');
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
font-family: CustomArial;
}
If you are using jquery mobile, you have to override the font like:
.ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button {
font-family: CustomArial !important;
}
You have to override the font-family in your css for whatever jquery mobile class having font-family:Helvetica, Arial, sans-serif; to
font-family:CustomArial !important;
Now it will work. You can try like this, may be its useful for you.
here your can find the .ttf the google fonts : https://github.com/w0ng/googlefontdirectory
in your .css file
#font-face {
font-family: 'Open Sans';
src: url('../font/OpenSans-Regular.ttf') format('truetype');
font-weight: 400;
}
I was facing a similiar issue. The problem was with the path it was taking when the font was given through an external css file.
To resolve this, i declared the font URL inline in the body of index.html
<div>
<style scoped>
#font-face {
font-family: Monotype Corsiva;
src: url('fonts/Monotype_Corsiva.ttf') format('truetype');
}
</style>
</div>
It worked after declaring the font URL in this manner.
<style type="text/css" media="screen">
#font-face {
font-family: 'centurySchoolbook';
src: url('fonts/arial.ttf');
}
body {
font-family: centurySchoolbook;
font-size:30px;
}
</style>
with quotes on the font-family and on the url worked for me, inside the html file and on Android.
It works on physical devices, but not on emulator.
The possible issues lies in default index.css in cordova. Check if the body element has style defined for "text-transform:uppercase".
Atleast that was the issue for me, after removing this from body element in default index.css if you are using in your application, may help you as well.
For me I was using gurmukhi/punjabi fonts, and after the above line removal from index.css it just worked like charm with below css definiitions only
Example :
.demo {
font-family: anmol
}
#font-face {
font-family: anmol;
src: url(../fonts/anmol.ttf);
}
I just copied my ttf-fonts into the directory [app-name]/css and declared the font-families in the index.css there. See attached image: my edited index.css (Check the green marked areas in the attached picture). There i also changed the style "background-attachment:fixed;" "Helvetica, Arial, no-serif…" to "Open Sans, Open Sans Condensed, no-serif", – i also deleted the line "text-transform:uppercase". After that everything worked fine with my font "Open Sans".
Of course i also included my own stylesheet with declarations of the other styles and font-families of my project.
I am also using jQuery and jQueryMobile in that project. They use the same font (Open Sans), but i added additional fonts that work as well!
Happy coding!