I'm trying to present a simple message to the user in my mobile website.
I want the message size approximately will be the same on mobile devices with similar screen size, for example iPhone and Samsung Galaxy (android).
I read a lot of posts on this issue, and many recommended to use -webkit-text-size-adjust: 100% to make it happen. But I didn't understand how to use it...
The webpage:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html { -webkit-text-size-adjust:100%; }
</style>
</head>
<body>
<div style="text-align:center;font-size:6em;-webkit-text-size-adjust:100%;">
Hello World!
</div>
</body>
</html>
The result:
Did you test the viewports meta?
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, height=device-height"/>
Related
I have seen this question, but my goal is to simply view an HTML page correctly in a web browser on Android. Simply put, the .html file contains the following code:
<!DOCTYPE html>
<html>
<head>
<style>a {font-size:25px;}</style>
</head>
<body>
Some text<br>
</body>
</html>
I'm trying to view this file on my phone with the large font size that is set in style. But every browser I have tried changes the font size to normal when loading. I know about the "accessibility" setting, but that doesn't meet my needs as it changes the font size for every page, and is also not big enough.
I have also tried other ways to change font size, such as using font-size property inside <a> tag, <big> tag around the text, and the font size changes accordingly on desktop but android doesn't follow suit. Any help would be appreciated!
Add <meta name="viewport" content="width=device-width, initial-scale=1"> in your head tag.Read docs here
<!DOCTYPE html>
<html>
<head>
<style>a {font-size:25px;}</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
Some text<br>
</body>
</html>
Try add in the head tag the following meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Chrome: the icon meta is not used for "adding to desktop" on windows laptop.
<!doctype html>
<html>
<head>
<title>Example Application</title>
<meta name="viewport" content="width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="500x400" href="/icon.png">
</head>
<body>
Hello, Great day!
</body>
</html>
But it is used for "add to home screen" on android device. Any thoughts?
I had commented on this earlier. But, I was able to get an icon in the "Add to Desktop" tool within Chrome.
For a long time it wouldn't work for me, but my resolution was 150x136 (not sure why, but that was the original I was given). I then tried using a program, Gimp for example, to change the resolution to be square (136x136 to be exact). Then it worked!
So, my suggestion is to make your icon perfectly square and then refresh your page (crtl+shift+R) and try again.
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 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.
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/