I have a html called today.html and I use it on my iphone and I have to zoom in to see my tasks how can I have it formated correctly so that I it warps around the screen on the iphone and the text is the right size
here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tasks for today</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="sebastian stephenson">
<style type="text/css" media="screen">
body {
border: medium dashed #7979ff;
background-color: #fff;
margin: 0 auto;
}
body p{
font: 2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
padding-left: 10px;
}
.todos {
font: 1em"Lucida Grande", Lucida, Verdana, sans-serif;
color: #7D1518;
padding-left: 20px;
}
.todos p{
font: 1em Arial;
}
</style>
<!-- Date: 2008-08-24 -->
</head>
<body>
<p>a greeting</p>
<div class="todos">
<li>a task</li>
<li>a task with detail</li>
<p>detail</p>
<li>a task with muilple acitons</li>
<ul>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
</ul>
</div>
</body>
</html>
thanks
Have you tried setting the viewport to fit the iphone screen size?
<meta name="viewport" content="width=320" />
see more details at: constrain-your-viewport-for-iphone-web-development
Also see developer.apple.com for other factors regarding iPhone web development (such as Adjust Text Size for Readability)
Have a look here
Quote:
If you are a CSS expert, your first thought will be to use the "handheld" media type in your CSS code. For instance, if a browser considers itself a handheld device, this code will hide all elements that belong to the navigation CSS class. That's handy if you know that these elements are convenient but redundant and take up more space than a handheld user wants to give up:
#media handheld {
.navigation {
display: none;
}
}
Unfortunately this won't work on the iPhone. Why? Because Apple knows that the iPhone can display a page much better than most handhelds. And they didn't want the iPhone to display all web pages in a "dumbed-down" way. So the iPhone looks at the "screen" media type, just like your desktop browser does.
Is there an alternative? Yes! You can specify that a set of CSS rules apply only when the screen is smaller than a certain resolution:
#media only screen and (max-device-width: 480px) {
.navigation {
display: none;
}
}
Try setting font-size: 100%; on the body, that way the browser will definitely be starting from it's default size before applying your em sizes. In addition to that try adding -webkit-text-size-adjust: auto; to your page.
This article goes into a lot of depth on the specifics of developing for mobile safari:
http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/
Ive cleaned up your HTML a little, by putting the LI inside UL and getting rid of the redundant div.
You can set a max-width on any block level element, so combining that with #epatel's media declarations get's you the following.
Play around with the width's and so on. Ive just set them randomly.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tasks for today</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="sebastian stephenson">
<style type="text/css" media="screen">
body {
border: medium dashed #7979ff;
background-color: #fff;
margin: 0 auto;
}
body p{
font: 2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
padding-left: 5px;
}
.todos {
font: 1em"Lucida Grande", Lucida, Verdana, sans-serif;
color: #7D1518;
padding-left: 20px;
}
.todos p{
font: 1em Arial;
}
ul {
max-width:200px;
}
#media only screen and (max-device-width: 480px) {
ul {
max-width:480px;
}
}
#media only screen and (max-device-width: 240px) {
ul {
max-width:240px;
}
}
</style>
<!-- Date: 2008-08-24 -->
</head>
<body>
<p>a greeting</p>
<ul class="todos">
<li>a task</li>
<li>a task with detail
<p>detail</p>
</li>
<li>a task with muilple acitons
<ul>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
</ul>
</li>
</ul>
</body>
</html>
The selected answer is for iphone but for dynamic width of ranging devices you may add this piece of code in your "head" tag.
Reference
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
Related
HTML CODE:
(Image is present in the right directory)
<html lang="en-US">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<h1>Sample Header</h1>
</header>
<main>
<article>
<h2>Sample Header 2</h2>
<p>Sample Paragraph 1</p>
<p>Sample Paragraph 2</p>
</article>
</main>
</body>
CSS CODE:
html{
font-family: 'Open Sans', sans-serif;
background-image: url('images/pattern.png');
background-color: burlywood;
}
body {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background-color: white;
position: relative;
}
header {
height: 150px;
}
h1 {
font-size: 50px;
line-height: 140px;
margin: 0 0 0 32.5px;
}
main {
background: #ccc;
}
article {
padding: 20px;
}
h2 {
margin-top: 0;
}
p {
line-height: 2;
}
background-image does not work in the above form,but when the same css-code is included in style tag,background-image works perfectly fine,why not in external stylesheet?
I think this is a path issue for the background-image: url(...). I can't reproduce at the moment because of lacking information but please be aware of your folder structure. When you use <style> for CSS the starting point for the relative path is your root folder (or where the HTML is located).
In case of the style.css the starting point is the folder styles. So mind that in that case the path might have to change. You can use the Firefox developer tools or Chrome developer tools to modify your path on the fly. This way you can easily find out yourself where the issue with the path originates or if the background-image rule was applied properly on your element.
Updated: added links to developer tools (Mozilla, Google)
At the moment the used code centers a div with a width of 980px in a background div which contains an image with a link. This works fine on PC, Apple and Android. When the resolution is more than 980px, you see the background image equally on both sides. On Android phone or tablet you see 100% of the maincontainer div. But on iPhone and iPad, the maincontainer div aligns to the left and you see about 200px of the background div on the right side. I tried a lot of things, but I can't get it to act on iPhone and iPad like it does on Android devices: the maincontainer div 100% of the viewport.
My code is this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
html {
height:100%;
width:100%;
overflow-x: hidden;
overflow-y: scroll;
background-color: #FFF;
}
body {
width:100%;
height:100%;
font-family:Arial,Verdana,Helvetica;
font-size:12px;
font-weight:normal;
color:#020051;
line-height:14px;
text-align:center;
background-size: 100%;
background-attachment:fixed;
background-position: center top;
margin-left: auto;
margin-right: auto;
}
#background_with_link{
position:absolute;
top:0px;
width:2400px;
left:50%;
display: block;
margin-left:-1200px;
text-align:center;
}
#main_container{
position:absolute;
top:0px;
width:980px;
left:50%;
margin-top:103px;
margin-left:-490px;
margin-bottom:50px;
margin-right:auto;
}
</style>
</head>
<body>
<div id="background_with_link">
<img src="/UserFiles/Banners/image.jpg" alt="" title="" border="0" />
<!-- Main Container start -->
<div id="main_container">
</div>
<!-- Main Container end-->
</div>
</body>
</html>
I hope there is a solution for this. Thanks!
Erwin
I have a jsfiddle here - http://jsfiddle.net/eYV4n/
Really simple navigation and a hidden div block beneath it.
When you click the second link in the nav the div block slides down with slideToggle.
When the div block slides down I would like the button clicked to be selected.
I can do this when it's clicked by changing the background color.
Is it possible to deselect the link (change it's color back) when the div block slides again.
jquery.hover() handler hover-in and hover-out. Is it possible to do the same thing with slideToggle.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:#eee;
}
#wrap{
background:#fff;
max-width:800px;
margin:0 auto;
height:1000px;
}
ul{
list-style:none;
overflow:auto;
}
ul li{
display:inline;
}
ul li a {
float:left;
display:block;
color:#222;
padding:10px;
margin:0 5px 0 0;
}
#block{
width:100%;
margin:0 auto;
height:200px;
background:red;
display:none;
}
</style>
</head>
<body>
<div id="wrap">
<nav>
<ul>
<li>One</li>
<li>Two ↓</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
<div id="block">
</div>
</div><!-- #wrap -->
<script>
$('#btn').click(function(e){
e.preventDefault();
$('#block').slideToggle('2000')
$('#btn').css('background','red');
})
</script>
</body>
</html>
A better solution is to toggle a class that in turn changes the background. You should make it a best practice to never style elements with Javascript, you should use CSS for that. Adding/removing classes is fine though. This will make the code much easier to maintain in the long run, and it's also more semantic since you're using classes and not inline styling.
Try this:
$('#btn').click(function(e){
e.preventDefault();
$('#block').slideToggle('2000')
$('#btn').toggleClass('active');
})
Then in your CSS.
.active { background: red; }
Edit: Jsfiddle here.
This is about displaying a simple HTML page in iPhone's browser, with rotation.
Setup: two identical tables but one of them has a (CSS) width of 69% while the other is at 100%.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable = yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Test</title>
<style>
table
{
border-collapse: collapse;
}
th
{
font-weight: normal;
border: 1px solid red;
}
td
{
border: 1px solid green;
}
#t1
{
width: 69%;
}
#t2
{
width: 100%;
}
</style>
</head>
<body>
<table id="t1">
<tr><th colspan="2">TH COLSPAN 2</th></tr>
<tr><td colspan="2">TD COLSPAN 2</td></tr>
<tr><td>CELL 1</td><td>CELL 2</td></tr>
</table>
<hr />
<table id="t2">
<tr><th colspan="2">TH COLSPAN 2</th></tr>
<tr><td colspan="2">TD COLSPAN 2</td></tr>
<tr><td>CELL 1</td><td>CELL 2</td></tr>
</table>
</body>
</html>
Behaviour: although the two tables are displayed with the same font size in the default orientation (portrait), when rotating the device the full width table displays TDs/THs having a COLSPAN=2 in a bigger font size (screenshots are taken from iPhone):
This seems to be a bug in Safari but, nonetheless, I have to get around it.
Any idea about a decent workaround?
Thanks.
This is because sometimes Safari webview Zooms text automatically when it thinks its a good idea.
To disable this behavior add this to your body CSS Style:
-webkit-text-size-adjust:none;
I am trying to implement a simple page with bunch of text fields and using iscroll to scroll.
The issue is when I click on the textfield, the key pad appears but I can't scroll either to the bottom of the screen or to top of the screen.
Here is the code. Any help regarding this is much appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Change this if you want to allow scaling -->
<meta name="viewport" content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>sample</title>
<!-- iPad/iPhone specific css below, add after your main css >
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
-->
<!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
// If you want to prevent dragging, uncomment this section
/* function preventBehavior(e)
{
e.preventDefault();
}
document.addEventListener("touchmove", preventBehavior, false);*/
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
function onDeviceReady()
{
// do your thing!
}
</script>
<link rel="stylesheet" type="text/css" href="scrollbar.css">
<script type="application/javascript" src="src/iscroll.js?v4"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<style type="text/css" media="all">
body,ul,li {
padding:0;
margin:0;
border:0;
}
body {
font-size:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
font-family:helvetica;
}
#header {
position:absolute;
top:0;
left:0;
width:100%;
height:45px;
line-height:45px;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
padding:0;
color:#eee;
font-size:20px;
text-align:center;
}
#header a {
color:#f3f3f3;
text-decoration:none;
font-weight:bold;
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}
#footer {
position:absolute;
bottom:0;
left:0;
width:100%;
height:48px;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
padding:0;
border-top:1px solid #444;
}
#wrapper {
position:absolute;
z-index:1;
top:45px;
bottom:48px;
left:0;
width:100%;
background:#aaa;
overflow:auto;
}
#scroller {
position:relative;
/*-webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
float:left;
width:100%;
padding:0;
}
#scroller ul {
position:relative;
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
#scroller li {
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}
#scroller li > a {
display:block;
}
</style>
</head>
<body>
<div id="header">iScroll</div>
<div id="wrapper">
<div id="scroller">
<ul id="thelist">
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
</ul>
</div>
</div>
<div id="footer"></div>
</body>
</html>
check out this
iScroll 4 not working with form <select> element iPhone Safari and Android browser
i was facing the same issue. worked for me. just a small change. instead of doing for select tag, do for all the tags for which u face the issue.
try to remove -webkit-user-select:none;