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;
Related
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.
I have a leaflet map in a div that I loa like this:
<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css" />
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I then have a div such as this:
Some js that loads the map:
map = L.map($attrs.id,
center: [40.094882122321145, -3.8232421874999996]
zoom: 5
)
L.tileLayer("http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png",
maxZoom: 18
).addTo map
Then on page load I have some JS that monitors window height and resizes:
$("#map").height($(window).height())
$(window).resize(_.throttle(->
$("#map").height($(window).height())
, 100
))
However when the map loads it loads with half the tiles in grey. When i resize the map loads fine but the initial load is 1/2 grey
If you don't have a reason to use JS for map sizing its probably better to use CSS:
html, body, #map {
width: 100%;
height: 100%;
}
However you can try using map.invalidateSize() after inserting the map into the DOM (or map resized by $("#map").height($(window).height())).
invalidateSize() is called by default when you resize the window, see the following links:
https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L609 and https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L616.
After a long search on this issue, in my case I had a global css style which was :
<pre>
img {
position: relative;
display: block;
max-width: 100%;
}
</pre>
In my case problem were the "position : relative", so I add a line
<pre>
//Fix personnal bug leaflet
.leaflet-pane{
img{
position: absolute;
}
}
</pre>
I am attempting to use CSS3PIE to round the edges of a select element. I am using the below code and running in IE7. The behaviour I get looks as though there are two rounded nodules in the bottom right of the select element. I would assume somehow the element is attempting to round the edges, but the proportions and/or position are not being passed for the created outer-element correctly. Anyone else have this issue or know how to fix it?
CSS
select
{
behavior: url(http:\\pc-653336\APTEIT\HTC\PIE.htc);
}
select
{
border:1px solid black;
border-radius: 10px;
}
HTML
<html>
<head>
<link rel="Stylesheet" href="test.css" />
</head>
<body>
<div id="divy"><select></select></div>
</body>
</html>
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;">