1

An element is acting out on ipad in portrait mode, so trying to set up a custom css for it via jquery.

Here is my code

$(document).ready(function(){
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad > -1 &&  $(window).width() < 800)
{
$(".fkup").css('margin-top','22px');
}            
});

Where did u make a mistake?

user3594249
  • 21
  • 1
  • 4
  • I would suggest using pure CSS instead of Javascript as much as possible. Responsive CSS(incase you are not aware, check [this](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries)) is the way to go! Can you please explain more about what you want? – Zeblimiski May 01 '14 at 21:26
  • I know about media queries. It all works fine except for portrait on ipad, where it goes slightly up. – user3594249 May 01 '14 at 21:28
  • You can use the width to determine orientation in media queries. or use media (orientation: landscape).. By width i mean, say, potrait: media max-width: 320px, landscape: media min-width: 321px. [ This is little tough to generalize though for all tablets. Once you get the ideal px, u can get it ] – Zeblimiski May 01 '14 at 21:34
  • 1
    it's ipad only, so user agent must be detected. other tablets work fine. I wish it was that easy :) – user3594249 May 01 '14 at 21:40

1 Answers1

0

I usually use css.. but try this (not tested)

if (navigator.userAgent.match(/(iPad)/i)) {
    if ($(window).width() < 800) {
        $(".fkup").css('margin-top','22px');
    } 
}

or the CSS route

@media (orientation:landscape) { }
Victor
  • 714
  • 1
  • 9
  • 23
  • hmm, not up on browser sniffing so try se if this helps: [link](http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery) – Victor May 01 '14 at 21:49