2

Background

I have a web application that works both on desktop (rendered inside iframe, fixed width align right), and mobile (full screen). And I'd like to create a CSS rules (within inside the iframe's document) with media queries that applies only to mobile devices, but not desktop.

enter image description here

More Specific Background

Thanks to @Andy that's asking the right questions in the comment.

Our application is sold as two different products. The standalone application (i.e. non-iframe) and the embedded application (i.e. iframe) within our client's website. The two products have two different styling requirements: the standalone application will have global styling across our clients, while the embedded application must match each client's website color schemes

When integrating embedded application on our client's mobile site, we found that they have <meta name="viewport" content="width=320"> that zooms in all elements, we couldn't edit this meta tag. Therefore we'd like to apply a CSS rule only for embedded application, mobile view, and this client only, to fix the enlarged elements.

CSS Media Query max-width

Using the standard max-width query won't work because even on desktop the width recognized is the iframe's width so it's always considered mobile.

@media screen and (max-width:480px) {
   ... /* this still runs on both mobile and desktop */
}

CSS Media Query max-device-width

Searched and read around the internet and found max-device-width:

@media screen and (max-device-width:480px) {
   ... /* this runs on mobile devices only */
}

at first this seem to work as it looks for device's width instead of document's width. However my concerns are:

  • device-width query is deprecated https://stackoverflow.com/a/18500871/1019950
  • On desktop's (i.e. Chrome) mobile emulator,max-device-width still considers desktop's screen width, so it doesn't apply the mobile CSS rules.

How to create a media query that works inside iframe and applicable to mobile-devices (or mobile emulator) only, i.e. top document's width is less than 480px?

Irwan
  • 321
  • 2
  • 9
  • It’s interesting that you would like to make a difference on device-level, while everybody is crying for container queries. Why is that? Why wouldn’t you want to adjust the iframes content to its size, and instead make a difference based on device? We established a long time ago that decision based on device are bad, and that feature detection is the way to go. Assuming a device based on screen width as a very big assumption anyway, desktop users can zoom if they need to, they use split screen etc. – Andy Aug 05 '22 at 11:59
  • 1
    @Andy because the same application is sold as two different products. The standalone application (i.e. non-iframe) and the embedded application (i.e. iframe) within our client's website. The two products have two different styling requirements: the standalone application will have global styling across our clients, while the embedded application must match each client's website color schemes. – Irwan Aug 06 '22 at 12:22
  • I still don’t understand completely. You explain there is a difference between standalone and embedded. How is that related to mobile or desktop? The client’s website can be viewed on both devices, but their colour scheme should be applied any way, right? If that’s the case, why a media query? Usually in multitenancy systems, each tenant has their own URL, determining their settings (colour scheme). – Andy Aug 06 '22 at 13:22
  • Yes you're right both standalone and embedded application can be viewed on both desktop and mobile. I missed mentioning that on the client's mobile website (embedded application on mobile view) there's `` that zooms in all element (apparently default by Wix). We want to apply a specific CSS rule to just embedded application, on mobile view, for this client only. I have updated my question. – Irwan Aug 13 '22 at 09:16
  • I dug around a bit and found an approach that uses `window.screen.availWidth` to figure out the actual device screen width. https://stackoverflow.com/questions/30595948/is-it-possible-to-load-a-responsive-iframe-within-a-non-responsive-site In their case it’s safe to assume that if the screen is smaller than the viewport size, they want to apply a layout for small screens. In your case it’s the opposite. How are you currently determining whether to apply the client’s colour scheme? – Andy Aug 16 '22 at 08:48
  • Currently I'm using media query `max-device-width` which is not ideal. `window.screen.availWidth` might work in my case, but need to move some CSS into JS, thanks for the pointer, I'll try out and let you know! – Irwan Aug 17 '22 at 16:21
  • I considered using [`document.referrer`](https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer) to figure out where the iframe is embedded, but I’m not sure whether the browser might suppress this information due to strict privacy settings. – Andy Aug 17 '22 at 16:31

1 Answers1

0

This is tricky one. The way I solved this was by calling a function in parent using postMessage to return the width of browser viewport, I then set a class dynamically on the elements that require mobile only CSS styling.

I am happy with final solution though as it is robust.

jQuery Example

In parent page

window.addEventListener('message', event => {

var width = jQuery(window).width();
var iFrame = document.getElementById('iframe_id');
iFrame.contentWindow.postMessage({"get_parent_width":width}, "*");

}, false);

In iFrame

window.addEventListener('message', event => {

var width = event.data.get_parent_width;
            
if(width < mobile_trigger_width || isMobile){
  ..custom rules for mobile
  jQuery("#div_id").addClass("mobile");
}else{
 ..custom rules for desktop
  jQuery("#div_id").removeClass("mobile");
}

}, false);
david-giorgi
  • 145
  • 2
  • 10