hide on tablet

Peter Leleulya

Posted on 25/11/2020 09:43:04

Hi guys,

Our client contacted us that he had set the hide on mobile and hide on tablet checkboxes to true on a paragraph, but the paragraph was still visible on his iPad.

I opened their site and in my browser dom explorer dev tools I emulated an iPad view.
The paragraph was not there.
It behaved adaptive, not responsive.
So I thought thát was the issue, which actually isn't an issue at all ....

But it wasn't.

On the physical iPad the paragraph was still there.

I started testing on browserstack.com and was able to reproduce the issue.

I started testing on the newest iPad (iPad Pro 12.9 202) in its native safari browser and the paragraph was still visible.
Then I tested this same iPad using the chrome browser, there it behaves correct. The paragraph is gone.

I tested down and it seems the issue starts from iOS13 up in the native Safari browser.
So I suspected an Apple operating system issue ...

Then I tested an iPhone 8 with iOS13 ... and strangly there is NO problem there ... wtf ...

Is this a known issue?

I'd rather not make custom adjustments to this DW feature .... that would potentially make things worse I guess ...

BR.

Peter

Replies

Nicolai Pedersen

Posted on 25/11/2020 12:01:29

Yes - Apple last year decided to let some iPads report that they are desktops - creating a million issues with a lot of sites.

We have made a small javascript that will try to detect the viewport size and if it is a touch device, and based on that override the devicetype. There are no other ways of fixing this.

Below the script that you can use to detect if viewport is below a specific size, and then change device type. This version goes to mobile. You could combine it with an additional breakpoint and also add detection for touch for the tablet size.

//Switch between mobile and desktop

var screenResize = debounce(function () {

 let url = new URL(window.location);

 let params = new URLSearchParams(url.search);


 let currentDeviceType = 3;

 if (params.has("deviceType")) {

 currentDeviceType = params.get("deviceType");

 }


 let deviceType = 3;


 if (window.innerWidth < 768) {

 deviceType = 1;

 } else {

 deviceType = 3;

 }


 if (deviceType != currentDeviceType) {

 if (params.has("deviceType")) {

 params.set("deviceType", deviceType);

 } else {

 params.append("deviceType", deviceType);

 }


 url.search = params;

 window.location.replace(url.toString());

 }

}, 300);


window.addEventListener('resize', screenResize);


function debounce(func, wait, immediate) {

 var timeout;

 return function () {

 var context = this, args = arguments;

 var later = function () {

 timeout = null;

 if (!immediate) func.apply(context, args);

 };

 var callNow = immediate && !timeout;

 clearTimeout(timeout);

 timeout = setTimeout(later, wait);

 if (callNow) func.apply(context, args);

 };

};

Nicolai Pedersen

Posted on 25/11/2020 12:03:06

See this thread: https://getupdraft.com/blog/ipados-breaking-changes-developers

You must be logged in to post in the forum

Developer forum

hide on tablet

Replies