Target ipads

Resolved ckrausko
(@ckrausko)

9 years, 8 months ago

So I noticed on an ipad if I have it in landscape orientation the menu doesn’t trigger. I know that’s because of the width of the device. However, I don’t want to set the trigger point to 1024 because then it will easily snap into that mode on desktops. How can I edit the css in order to set the trigger on multiple conditions?

Basically I need to know where and what to put in this css code set.

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)

https://wordpress.org/plugins/responsive-menu/

Viewing 4 replies - 1 through 4 (of 4 total)

peterfeatherstone
(@peterfeatherstone)

9 years, 8 months ago

Hi ckrausko,

As the plugin is built not as a mobile menu but as a responsive menu it doesn’t take into consideration the orientation or type of device being used but just the pixel width.

You could of course however, edit the CSSModel.php file inside the app/Models folder.

You can replace the section that has the media query with your hard coded version.

Alternatively, you could use the external scripts option and then edit this file directly inside the responsive-menu-data/css folder.

Either way should work.

Let me know how you get on with this.

Many thanks

Peter
Chris Trynkiewicz (Sukces Strony)
(@eclare)

9 years, 7 months ago
Hi,

Thanks for this awesome plugin, Peter. And thanks for your incredible support in this forum.

I’ve looked into this and here’s what’s up. One can detect a mobile device via PHP or JS. PHP would be used to generate some JS or CSS code which would actually show the menu button and hide some DOM elements. PHP browser detection is based on a user-agent, which isn’t very good, as there are user-agents added like literally every day and for new devices. So, scratch PHP.

That leaves us with JS. Parsing the user-agent as we said is a bad idea. The 2nd idea is to use Modernizr and it’s touch check. If a browser has touch capabilities, Modernizr adds a “touch” class to the <body> tag and the JS statement if(Modernizr.touch) is true.
Using this, we can find the jQuery document ready function call. For this plugin, it would be after:

$RMjQuery(document).ready(function(){

And put the following code after it:
```
if (Modernizr.touch) {
 		$RMjQuery('#click-menu').css('display', 'block');
 		$RMjQuery('FROM_WP_SETTINGS_CSS_ELEMENTS_TO_BE_HIDDEN').css('display', 'none');
 		$RMjQuery('#responsive-menu .responsive-menu li li li li .appendLink, #responsive-menu .responsive-menu li li li li li').css('display', 'none');
	}
```
What we did here, is the following: checked, if the browser has touch capabilities, if so: shown the thee lines menu button, hid the CSS elements that were set in the WP plugin settings (this needs to be changed to a PHP variable of course), set the CSS rules that were originally set in the Responsive Menu plugin (not sure what they do, but doesn’t matter).

The only drawback is that Modernizr.touch checks if the browser has touch capabilities, not if the device itself has touch capabilities and has touch enabled. Some desktop browsers will return true for this even though the device they’re installed on doesn’t actually have touch capabilities. As far as I’ve read, this doesn’t happen very often though, so for my case it’s better than nothing.

I’m not sure if it’s a good idea to implement it, maybe as an option, but whatever – here it is.

Hope it helps someone.

Edit: Note that the display:none attributes are not marked as !important. They seem to work without it though. For some cases they might not work and here’s the solution: http://stackoverflow.com/questions/2655925/how-to-apply-important-using-css
Chris Trynkiewicz (Sukces Strony)
(@eclare)

9 years, 7 months ago
After trying it I came to the conclusion that this is a bad idea too, and even worse than detecting the user-agent.
Currently at least the latest Chrome na Firefox seem to return true for Modernizr.touch on desktops.

Here’s my current code, working. One needs to addjust the variables etc… I’m also using $j (my own instance of jquery) instead of $RMjQuery.
```
// ------- MOBILE-FRIENDLY VERSION EVEN IF THE RESOLUTION IS HIGH (RETINA DISPLAYS), but there is a touch screen
	var mobile_detected = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
	if (mobile_detected) {
		$j('body').addClass('touch');
 		$j('#click-menu').css('display', 'block');
 		$j('#menu_wrapper, .close_button, #expand_button, #prevslide, #nextslide').css('display', 'none');
 		$j('#responsive-menu .responsive-menu li li li li .appendLink, #responsive-menu .responsive-menu li li li li li').css('display', 'none');
	}
```
peterfeatherstone
(@peterfeatherstone)

9 years, 7 months ago

Hi Chris,

Thanks very much for all your work on this and I hope it is useful for other users!

Many thanks

Peter

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Target ipads’ is closed to new replies.