3

Hi I want to detect ipad orientation in php, i know i can detect the iPad but how do i detect the orientation, i need it in php and not css because i want to show x pictures in my gallery in portrait and x in landscape.

here is the code i am using to detect the php for iPad:

if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPad') !== FALSE) {

} else {

}

i have checked on this site and on google but was unable to find anything which could help

thankyou

graham
  • 53
  • 1
  • 4

7 Answers7

4

iPad orientation can change when the user holds her iPad differently. Therefore, there's no point of registering it in php - by the time your response reaches the client, it might already be different.

If there needs to be any plumbing that can't be done in CSS (like loading different images or so), handle the orientationchanged event in JavaScript.

Community
  • 1
  • 1
phihag
  • 278,196
  • 72
  • 453
  • 469
  • @graham Well, then do that in JavaScript, or better, send it all the time and include a CSS rule `@media all and (orientation:landscape){ .portrait-only {display:none;}}` to hide it otherwise. – phihag Jul 30 '11 at 19:46
0

use this code may be use full to you var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';

The iOSDev
  • 5,237
  • 7
  • 41
  • 78
0

A brutal way would be to store the orientation change in a cookie through jQuery and access it with the $_COOKIE variable in php.

However, you would still need the javascript hooks to detect the orientation change and possibly a page reload.

Littm
  • 4,923
  • 4
  • 30
  • 38
0

This is not orientation detection but USER AGENT detection. It only detects what kind of browser is browsing your page.

Fredrik
  • 1,282
  • 12
  • 15
  • The user agent string of modern browsers contains much more than the browser name and version, so this is not entirely accurate. – phihag Jul 30 '11 at 19:31
  • Here's the iPad USER AGENT String: "Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10" Where does it say your current device orientation? – Fredrik Jul 30 '11 at 19:36
  • It does not. I was referring to the second sentence. Some user agents list plugins, operating systems, machine architecture, and the like, so `kind of browser` is not an entirely accurate description for the HTTP user agent. – phihag Jul 30 '11 at 19:40
0

Are you trying to detect the device or what way the device is rotated?

I believe you would have an easier time detecting the orientation of a device either in Javascript or CSS, have you looked into these yet?

Javascript:

<button onclick="detectIPadOrientation();">What's my Orientation?</button>

<script type="text/javascript">
    window.onorientationchange = detectIPadOrientation;
    function detectIPadOrientation () 
    {
        if ( orientation == 0 ) {
            alert ('Portrait Mode, Home Button bottom');
        }
        else if ( orientation == 90 ) {
            alert ('Landscape Mode, Home Button right');
        }
        else if ( orientation == -90 ) {
            alert ('Landscape Mode, Home Button left');
        }
        else if ( orientation == 180 ) {
            alert ('Portrait Mode, Home Button top');
        }
    }
</script>

CSS

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
WrightsCS
  • 50,551
  • 22
  • 134
  • 186
  • i tried to use your code but don't know how to add mine to yours and when i tried it didn't work :( can you post my code with yours. I am using the css stylesheet thing which is great :) – graham Jul 30 '11 at 20:09
0

The device orientation is dynamic - the user can rotate the device after the page has been loaded. Therefore, it makes no sense to include it in the user agent string.

Instead, you should use HTML and JavaScript to change the layout when the orientation changes.

sagi
  • 5,619
  • 1
  • 30
  • 31
0

Everyone is suggesting you do it in Java Script which is completely correct but I'm guessing you don't see that as an option from your question.

You should load enough images (or all if not a stupid number, it is only a URL string after all) from PHP to fill the largest size in JSON (json_encode($array of image URL's to use)) format. Then use JavaScript to detect orientation and populate the page with the correct number/layout of images.

You'll have an array in JavaScript of Image URL's to pick from and load dynamically.

Paystey
  • 3,287
  • 2
  • 18
  • 32
  • hi all I'm more than happy to do it with js but i need to do some animation in jquery i don't know enough javascript to combine them both like i want to hide my header or make it smaller to show the more images which i can do in query using the animate feature. – graham Jul 30 '11 at 19:45
  • here is my js but i need it to do it when in portrait mode: `` – graham Jul 30 '11 at 19:59
  • Why does the animation not work in portrait mode? if it's simply a size issue then they can be computed first based on whether it's portrait or landscape – Paystey Jul 30 '11 at 22:43