how to make my code scalable on iphone ..thanks
- by zjm1126
this is my code:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=0,maximum-scale=2.0><!--,user-scalable=no">-->
</head>
<body onorientationchange="updateOrientation();">
<div id="a">
<input id='ab' type="button" value="button" />
</div>
<div id=b style="display: none"></div>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
/*height: 356px;*
}
/* Reposition on orientation change */
body.landscape{
height: 208px;
}
body.landscape div#a{
line-height:104px;
}
div#a{
height:50%;
line-height:178px;
text-align:center;
}
#b{
width:100%;
height:50%;
background:red;
}
</style>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
function updateOrientation() {
var orientation = window.orientation;
switch (orientation) {
// If we're horizontal
case 90:
case -90:
// Set orient to landscape
$(document.body).addClass("landscape");
break;
// If we're vertical
default:
// Set orient to portrait
$(document.body).removeClass("landscape");
break;
}
}
$('#ab').click(function(){
if($('#b').css('display')=='none')$('#b').css('display','block')
else $('#b').css('display','none')
})
</script>
</body>
</html>
thanks
