Iphone Shows Same Height And Width Of Window Screen Even After Changing Orientation

In this post, we will see one of the secret of Iphone i.e. Iphone shows same height and width of window screen even after changing orientation but this is not happened in Android. So be carefull while coding for window screen height and width in javascript for Iphone and Android devices.

IPhone shows same height and width for window.screen.height and window.screen.width respectively even after changing orientation. Means if you are changing orientation from Portrait to Landscape or Landscpae to Portrait and checking screen height and width, you will get same height and width in both the modes.

Many of us working on iphones for making and designing applications.
Before moving on your logic part for developing applications on such devices using screen height/width, first of all you have to check whether device is workable for that logic or not.

Just cross check by writting some lines of javscript code for checking windows screen height and width is appropriate according to device or not.

Probablly this issue will be see only on iphone not on android devices.

Hence here I have given some javascript code for getting proper screen height and width. For that you have to know about Portrait View and Landscape View : So, according to the coding standarts a value of

   0 means portrait view (top to bottom)
   -90 means a the device is landscape rotated to the right
   90 means the device is landscape rotated to the left
   180 means portrait view (bottom to top)
   

   // iPhone screen width and height does not change even
  // after changing orientation

  // for setting window to tempWin
  var tempWin = window;
  var pagew, pageh;

  // if window is not parent window
  // then set parent window to tempWin

  if(parent.window != tempWin)
  {
   tempWin = parent.window;
  }
 
  // Landscape, iPhone screen width and height
  // does not change even after changing orientation
  // so for landscape mode set screen
  // width as a page height
  // and screen height as page width

  if ((tempWin.orientation == 0 
   || tempWin.orientation == 180)) {

   pagew = screen.width;
   pageh = screen.height;

  }
  else if (tempWin.orientation == 90 
   || tempWin.orientation == -90) {

   pagew = screen.height;
   pageh = screen.width;

  }
  

Conclusion :

I hope that this article would have helped you in studing logic behind orientation in javascript as well as getting proper screen height and width for performing various operations on Iphone and Android. Please share your knowledge if you know more about this. Your feedback and constructive contributions are always welcome.