PDA

View Full Version : How to make a page detact ipad is horizontal or vertical.


mampwamp2
12-14-2012, 02:58 AM
How to make a page detact ipad is horizontal or vertical.
if vertical it will show vertical image.
if horizontal it will show horizontal image.

mampwamp2
12-14-2012, 06:08 AM
i follow this website http://www.williammalone.com/articles/html5-javascript-ios-orientation/ and try to create a site for device orientation,
but it was no response...nothing shown.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
window.onorientationchange = readDeviceOrientation;
function readDeviceOrientation() {

switch (window.orientation) {
case 0:

alert ('Portrait Mode, Home Button bottom');
break;

case 180:

alert ('Portrait Mode, Home Button top');
break;

case -90:

alert ('Landscape Mode, Home Button right');
break;

case 90:

alert ('Landscape Mode, Home Button right');
break;
}
}
</script>
<script type="text/javascript">
function readDeviceOrientation() {

if (Math.abs(window.orientation) === 90) {
// Landscape
document.getElementById("orientation").innerHTML = "LANDSCAPE";
} else {
// Portrait
document.getElementById("orientation").innerHTML = "PORTRAIT";
}
}

window.onorientationchange = readDeviceOrientation;
</script>

<body>

</body>
</html>

domedia
12-14-2012, 01:06 PM
Nothing can go in between the closing HEAD tag, and the opening BODY tag. Move all your JS inside the HEAD element.

It might not fix your issue, but it can't stay like it is; the basic structure of the page is not valid.

.

Ricky55
12-14-2012, 04:30 PM
If all you are doing is changing the site appearance then you can just use CSS media queries.


@media all and (orientation:portrait) {
/* Your code */
}

@media all and (orientation:landscape) {
/* Your code */
}