Trying to load http://www.sciences-physiques.eu/appli/oneimage/ both in iOS and Android (SGS2).
Image is 1600*2262
The result is a better image on iOS. I know android can do better, because I had an application with such big image downsized, and the text was "clearer".
I red a lot about adding some code in css, but it seems that it does not apply to webkit
Here are the screenshots :
http://tof.canardpc.com/show/9144d047-0aaf-4906-9c96-1a991112f9fc.html
http://tof.canardpc.com/show/36008198-e6ef-4b02-820b-fe2ca8b8df1c.html
The code is :
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>carimage</title>
<style type="text/css">
img { width: 100%; }
html, body {
height: 100%;
background-color: #1985D0
}
</style>
<body>
<img src="1.png" />
</body>
</html>
The quality of images in iOS apps are better than those of android (having same resolution), image quality gets improved with the specified code but the time for loading increases. While doing android application development for my client I implemented the code and felt the difference in both quality and loading time.
Related
Expected result (Chrome)
I have developed a mobile web app that works great with Chrome on Android. Here is a screenshot:
The white bar with Safari
Now I have some issues with other browsers. For instance Safari with iOS 8.3 on an iPhone 5 will display this ugly, plain white column on the right. Preventing <body> to take up the whole viewport's width and triggering the vertical scrollbar:
The empty page with the Android default browser
On the other hand, the "Browser" application that comes with most Android phones won't show what is below the top navbar:
This occurs for Browser 4.2.2 on a Wiko Iggy , but the problem is not present for Internet 2.1.34.1 on a Samsung Galaxy S4 (are "Browser" and "Internet" different applications developed separately? I have no idea.).
Markup
Here is the high level markup of the app. I'm using AngularJS with a yeoman generator and mobile-angular-ui as a UI library.
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
...
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="no">
...
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" media="(min-width: 641px)" href="styles/main.css">
...
<link rel="stylesheet" media="(max-width: 640px)" href="styles/mobile/mainMobile.css">
...
<!-- endbuild -->
</head>
<body ng-app="myApp" ng-controller="MainCtrl as MainCtrl">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view=""></div>
<div ui-yield-to="modals"></div>
<!-- build:js(.) scripts/oldieshim.js -->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<![endif]-->
<!-- endbuild -->
</body>
</html>
CSS
I have simply no css styling at all for html and body.
I can provide any additional information that you think is relevant to troubleshoot this issue. My first priority is to get the problem solved on iOS.
There's probably something wrong with your website viewport, the body/html heights or even with "uncleared" floats.
I recommend commenting out piece by piece the UI, so you can easily debug it and find what the problem is.
I had this exact same problem.
The issue I had was that an element on my page had pixel width of greater than the width of the page.
Counter-intuitively, this resulted in other elements on the page who's width should have been 100% of the page, are re-sized to now extend the entire width of the page. I think this is because the element that was too wide become 100%, and the other elements that should have been 100% were rendered smaller in proportion to the over-sized element.
Example:
Too big element: 1000px
Device's display is 800px
... now anything that is 1000px will extend the whole length, and anything that is 'width:100%;' will only extend 80% of the page because 800px is 80% of 1000px. ... this is my theory at any rate...
I fixed this by adding "max-width:100%" to all elements that had set pixel width:
.div-class{
width:1366px;
max-width:100%;
}
I'm trying to build a cross-platform app in Xamarin using Xamarin Forms that just views my site.
Most of the stuff is working really well, but I've come across a big problem under Android. I made a test Xamarin app not using Xamarin Forms, just the native Android stuff Xamarin offers, to test if its just a Forms issue. Turns out it seems to be...
The issue seems to be that the Xamarin Forms WebView is rendering the css for “position:fixed” VERY incorrectly, while under the “native” Xamarin Andoid app everything is rendered as would be expected.
Now as far as I understood, Xamarin Forms should use the same underlying html renderer as the “native” app’s html renderer, which I imagined to be Chromium under Android 4.4 and above.
Is this not the case? Perhaps this is a known bug? Or just a setup issue on my side?
Below are images illustrating the bug. As you can see, the big blue bar is not rendered correctly on the right.
This is the test HTML the apps are rendering to illustrate the bug:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background: blue; height:100px; width: 100%; position:fixed; left: 0; top: 0;">
<div style="margin:0 auto; width: 200px;">
<p style="color: white;">HELLO WORLD</p>
</div>
</div>
</body>
Any help on this would be GREATLY appreciated!
Thanks,
Bas
The problem is not in a html . Add height on a WebView or put it in Grid row.
https://developer.xamarin.com/guides/xamarin-forms/user-interface/webview/
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)
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'm developing application for android. my application has very big size (APKfile) that is because of some high quality images. I decided to move it into server and in app, just load the webpage and show it in through webpage. Each HTML page has just one image (without text and other items) and all images have 450 pixels width while height may be different for each image. When i load the web page, image is not fit to screen and is bigger than my screen. I need to have image fit to screen.
I know i can load just image from server but when i did it the aspect ratio was not fine and image squashed. its width stretched while the height didn't take effect. The code that i used was android:scaleType="fitXY"
because of some reasons I don't want change the code totally and i prefer to find a way to apply changes to html file. My html file is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Team Championship</title>
</head>
<body>
<img align="left" alt="Team Championship" src="../image/team_championship.png"/>
</body>
</html>
please tell me, how it is possible to have image fit to screen in all devices?
sorry, although i'm not bad in Android programming, I'm not familiar with web programming.
Thanks
Thanks guys,
but easier and fastest way is changing above image code to this:
<img align="left" alt="Abudhabi" src="../image/track_abudhabi.png" width="100%"/>
now in all devices the image is fit to screen.
I was working on a mobile website. The test devices were an iPod Touch, and two Android phones. No issues with the iPod Touch, but the Android phones insisted on making the image be the full size. So you could only ever see about 25% of the image. I searched on "fit web page with graphic to device" and it lead me here.
The adding of width="100%" worked exactly as I needed for my issue. Simple! Thanks.
If you know the dimensions of your image, you can set the scale for your web view, e.g.:
DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int imgWidth = ...;
int imgHeight = ...;
if(imgWidth > displayMetrics.widthPixels) {
int scaleInPercent = 100 * displayMetrics.widthPixels / imgWidth;
m_webView.setInitialScale(scaleInPercent);
}
Just add the check for the height and you should be good to go.
If you are using a WebView, the best and simplest way is to add a style tag inside the head tag:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
img{
max-width:100%;
height:auto;
display:block;
margin-left:auto;
margin-right:auto;
}
</style>
<title>Team Championship</title>
</head>
<body>
<img align="left" alt="Team Championship" src="../image/team_championship.png"/>
</body>
</html>
Like this, ALL THE IMAGES are fit and centered.