Menu
Out of curiosity I've been playing with jQuery to determine the browser's screen size, and it occurred to me that screen size could be used to determine whether or not a visitor was using an iPhone/iTouch to view the site.
So I used the following to test this:
$(document).ready( function() { var screenX = screen.width, screenY = screen.height; alert("X: " + screenX + " Y: " + screenY); if (screenX == 320 && screenY == 396) { $('div#wrap').css('background-color','#f00'); } else if (screenY == 320 && screenX == 396) { $('div#wrap').css('background-color','#0f0'); } } ); On viewing the page via iPhone, I notice that the dimensions are consistently (regardless of orientation):
x: 320, y: 396
This is regardless of orientation. I haven't, as yet, attempted to use an onChange event to detect changes (mainly because I'm still so new at jQuery), but I wondered if there was a way to determine, via jQuery or plain javascript, the iPhone/iTouch's orientation?
851
With the iPhone 6 Plus, 6s Plus, and 7s Plus, you have the ability to use the home screen in landscape mode (with the iPhone held horizontally) or in portrait mode (the iPhone held vertically).
window.orientation will give you an integer that denotes the rotation. You can listen for orientation changes by adding an event to the body:
<body onorientationchange="updateOrientation();"> Just on the off-chance that the link dies or gets moved at some point:
Value | Description -------+------------------------------------------------------------------------------- 0 | Portrait orientation. This is the default value. -90 | Landscape orientation with the screen turned clockwise. 90 | Landscape orientation with the screen turned counterclockwise. 180 | Portrait orientation with the screen turned upside down. This value is currently not supported on iPhone. If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
