iPad landscape and portrait orientation differ?

  • Resolved LeahGrrl

    (@leahgrrl)


    8 years, 11 months ago

    This plugin generally works great, and thank you for making it!

    On my client’s site, https://www.FocusCFO.com, there is an image link to a YouTube video. On desktop, it uses a lightbox plugin, but on mobile it would not work so I added the is_mobile code using your plugin that would make the mobile view simply a clickable link to YouTube. This worked perfectly on my Android as well as on her iPhone and iPad–but on the iPad, it showed up only in landscape mode and not portrait.

    So I added iPad-specific code (below) but now on the iPad she sees both the desktop lightbox version and the iPad change—but only in landscape. In portrait view, she’s fine.

    Should I have to mark the desktop original with some sort of “desktop” code? Or is there a way to add the orientation to your code? I know it has something to do with the sizing…should I make the image 600px max width?

    Here’s my code (part of the header), and many, many thanks for any help:

    <div id="slider">
<p align="center">
<a href="https://www.youtube.com/watch?v=tmz1jwED35Q&rel=0" rel="wp_lightbox_prettyPhoto" title="">
<img src="https://focuscfo.com/wp-content/uploads/2015/11/listenUp2.jpg"
alt="YouTube" />
</a>
</p>
</div>

<?php
if ( is_mobile() ) {
	echo '<div>
 		<p style="text-align:center;"><a href="https://www.youtube.com/watch?v=tmz1jwED35Q&rel=0">
			<img src="https://focuscfo.com/wp-content/uploads/2015/11/listenUp2.jpg" style="max-width:400px">
		</a></p>

	</div>
<div>';
}
?>
<?php
if ( is_ipad() ) {
	echo '<div>
 		<p style="text-align:center;"><a href="https://www.youtube.com/watch?v=tmz1jwED35Q&rel=0">
			<img src="https://focuscfo.com/wp-content/uploads/2015/11/listenUp2.jpg" style="max-width:400px">
		</a></p>

	</div>
<div>';
}
?>

    https://www.ads-software.com/plugins/mobble/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Scott (@scottsweb)

    (@scottsweb)

    Hello!

    That is interesting. This plugin does not work with device widths at all. It is based around the user agent string of the browser, you can test your devices here: https://demo.mobiledetect.net/ to see what they are detected as. If things are changing between portrait and landscape I would suggest that is happening with CSS.

    Regardless, I am thinking a change in logic could help fix things…try something like:

    if ( is_ipad() ) {
    // iPad only stuff
} else if ( is_mobile() ) {
    // mobile only stuff
}
    Thread Starter LeahGrrl

    (@leahgrrl)

    Thank you for your speedy response!

    I wonder whether another plugin (I’m thinking Responsive Menu, which I had to add to this relatively old site) is interfering somehow, too? I tried the conditional you suggested and I suspect I don’t know enough syntax to make it work because I got a blank screen after the top header. (All the “divs”?) I will keep trying and also change the order to see whether it makes a difference. (Not a true developer, as you can tell.)

    Thanks again.

    Plugin Author Scott (@scottsweb)

    (@scottsweb)

    If you paste all your code I might be able to spot where the syntax error is.

    Also if you get just a white screen, you can enable WP_DEBUG: https://codex.www.ads-software.com/WP_DEBUG – this will tell you on which line the code encounters a problem.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘iPad landscape and portrait orientation differ?’ is closed to new replies.