StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here's how I figured it out. Its a two step process.</p> <p>Step 1 - Check to see if the device is an iPhone or an iPod.</p> <p>Step 2 - If it is then check to see if the browser is safari</p> <pre><code>// On document ready set the div height to window $(document).ready(function(){ // Assign a variable for the application being used var nVer = navigator.appVersion; // Assign a variable for the device being used var nAgt = navigator.userAgent; var nameOffset,verOffset,ix; // First check to see if the platform is an iPhone or iPod if(navigator.platform == 'iPhone' || navigator.platform == 'iPod'){ // In Safari, the true version is after "Safari" if ((verOffset=nAgt.indexOf('Safari'))!=-1) { // Set a variable to use later var mobileSafari = 'Safari'; } } // If is mobile Safari set window height +60 if (mobileSafari == 'Safari') { // Height + 60px $('#right-sidebar').css('height',(($(window).height()) + 60)+'px'); } else { // Else use the default window height $('#right-sidebar, .profile').css({'height':(($(window).height()))+'px'}); }; }); // On window resize run through the sizing again $(window).resize(function(){ // If is mobile Safari set window height +60 if (mobileSafari == 'Safari') { // Height + 60px $('#right-sidebar').css('height',(($(window).height()) + 60)+'px'); } else { // Else use the default window height $('#right-sidebar, .profile').css({'height':(($(window).height()))+'px'}); }; }); </code></pre> <p>Then use the mobileSafari variable whenever needed to execute mobile safari specific code.</p> <p>Starting with the device first rules out iPads and desktops etc which can also run Safari. Then the second step rules out Chrome and other browsers which can potentially run on these devices.</p> <p>Here's a more in depth breakdown of why I did it this way - <a href="http://www.ethanhackett.com/?blog=window-height-100-on-mobile-safari-coding-solution" rel="nofollow">http://www.ethanhackett.com/?blog=window-height-100-on-mobile-safari-coding-solution</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload