@media queries not working.

[Thomas_V_1]

Hi,

I have huge problems with media queries. The logic seams faulty. I try to use max-device-width, max-device-height, min-device-width and min-device-height to divide devices in to 3 groups. But I get strange results in the emulator. 

Apple 3gs 320X480 givs me the big screen option. 

Aplle 4s 320X480 (css) also gives the  big screen option.

Nexus 4 big as well etc 

What am i doing wrong? 

Can I do it in JS (with adjusting for pixel ratio) and have multiple css files? How do I automatically generate these from less?

I lost a lot of time on this. Any help is really appreciated. 

// the css
@media only screen {
  #ScreenState {
    width: 670px;
    height: 699px;
  }
}
@media only screen and (max-device-width: 670px) and (max-device-height: 670px) {
  #ScreenState {
    width: 670px;
    height: 670px;
  }
}
@media only screen and (min-device-width: 699px) and (min-device-height: 699px) {
  #ScreenState {
    width: 699px;
    height: 699px;
  }
}

// HTML

<div id="ScreenState" class="dummy"></div>

// JS

 var stateElem = document.getElementById("ScreenState");
 console.log("ScreenState width from: " + stateElem.offsetWidth + ' to ' + stateElem.offsetHeight);

[Thomas_V_1]

Ok I fixed it with a hack and it seams to work fine. Needs some testing. I hope this will help someone. First I generated 3 different css from less. Each less file imports the classes and calls them with own parameters. 

@import "const.less";
@import "bodyStyle.less";

.MYCLASS1( @var1_small; @var2_small; @var3_small; );

.MYCLASS2( @var1_small; @var2_small; @var3_small; );

Then I added the css files in the head like this: 

 <link rel="stylesheet" type="text/css" title="bodyStyle_small" href="css/bodyStyle_small.css" />
 <link rel="alternate stylesheet" type="text/css" title="bodyStyle_normal" href="css/bodyStyle_normal.css" />
 <link rel="alternate stylesheet" type="text/css" title="bodyStyle_big" href="css/bodyStyle_big.css" />

Then in onDeviceReady() I choose css by calling switchStyle

  var avW = screen.availWidth, 
        avH = screen.availHeight;
    
    var small = 670, // pixel
        big = 699; // pixel 
    
    if(avW < small && avH < small) { switchStyle('bodyStyle_small'); }
    else if(avW > big && avH > big) { switchStyle('bodyStyle_normal'); }
    else { switchStyle('bodyStyle_big'); }

and the function

function switchStyle(cssTitle) {
    var linkTag = document.getElementsByTagName("link");
    for (var i = 0; i < linkTag.length ; i++ ) {
        if ((linkTag.rel.indexOf("stylesheet") != -1) && linkTag.title) {
            linkTag.disabled = true ;
            if (linkTag.title == cssTitle) {
                linkTag.disabled = false ;
            }
        }
    }
}

[PaulF_IntelCorp]

@thomas -- thanks for that feedback, I'll let the responsible engineer know of your difficulties with the Emulate tab and media queries.

For future reference, use the Debug tab for a more accurate view of how your code will behave on a real device. You can also use the clause "if(window.tinyHippos)" to detect if you are running in the Emulate tab.

See these doc pages for more details:

• https://software.intel.com/en-us/xdk/docs/intel-xdk-introduction
• https://software.intel.com/en-us/xdk/docs/intel-xdk-dev-emulator-limitat...
• https://software.intel.com/en-us/xdk/docs/dev-emulator

[Chris_P_Intel]

Also, the Design view can set up media queries for you.  Insert and position wrap points for the different positions you want to discriminate upon, and then make a new style and then click the (+) tab where it lists the queries to make a new media query. Choose the two wrap point bounds you want and then the style options.  

From there, if you aren't working on a Design based project, you can copy the Less it generates and use it in your own project. It'll have variables (@wp1, @wp2) which are the positions of the wrap points. 

[Julian_H_Intel]

Hi Thomas,

I'm sorry to hear you lost a lot of time trying to get media queries to work in the emulator.  Media queries are only partially supported under emulation.

I am painfully aware that many people assume that the XDK Device Emulator is doing a real instruction-level emulation of the hardware and system software that you would find on a real device.  This is not the case.  When your program runs in the Device Emulator, you are really running in the host system's web run time, inside a <iframe>.  Despite the emulator's best efforts to disguise the differences, programs certainly can behave differently under emulation than they do on real hardware.  The emulator limitations link Paul provided explains this issue in more detail.

The emulator does find all the media queries in the program under test, but it only knows how to evaluate a few forms.  For example, if you had a media query that tested something like "-webkit-min-device-pixel-ratio: 2" then I believe you would find that your CSS would be correctly applied when emulating an iPad3 (pixel ratio = 2), but not when emulating a Droid2 (pixel ratio = 1.5).

More complicated media queries, such as the ones you are using, are left unaltered by the emulator.  This means they get evaluated by the host system's web run time and whatever happens, happens.  Your query tested the device-width and device-height. Since the size of your host system monitor is pretty big it is not surprising that you got the "large screen" look, regardless of the selected emulation device.

You might have better luck using width and height instead of device-width and device-height.  If that still doesn't work and your application requires this media query to work properly for productive testing then I recommend you take Paul's advice (above) to heart and concentrate your testing efforts on real hardware.

    Julian

[Thomas_V_1]

Thank you Paul, Chris and Julian for informative and really helpful comments. 

[Thomas_V_1]

Another question (from reading Pauls links). I do not use an App Designer but I used some inline javascript calls onClick="myfunc();";. Is there a(or several) good reasons to choose the JS approache like el.addEventListener(click, myClickHandler, false) ?

Seams like JS have less compatibility issues than css/html5 and emulator vs device. 

[PaulF_IntelCorp]

@thomas -- debugging is MUCH easier if you do not put JS inside your HTML. Compatibility should not be an issue. Inline JS can be a security issue for apps, the default for future Cordova build systems may result in disabling inline JS.

[Thomas_V_1]

Thanks. I will fix it in my code. 

[Ian_Devlin]

Julian H. (Intel) wrote:

Hi Thomas,

I'm sorry to hear you lost a lot of time trying to get media queries to work in the emulator.  Media queries are only partially supported under emulation.

I am painfully aware that many people assume that the XDK Device Emulator is doing a real instruction-level emulation of the hardware and system software that you would find on a real device.  This is not the case.  When your program runs in the Device Emulator, you are really running in the host system's web run time, inside a <iframe>.  Despite the emulator's best efforts to disguise the differences, programs certainly can behave differently under emulation than they do on real hardware.  The emulator limitations link Paul provided explains this issue in more detail.

The emulator does find all the media queries in the program under test, but it only knows how to evaluate a few forms.  For example, if you had a media query that tested something like "-webkit-min-device-pixel-ratio: 2" then I believe you would find that your CSS would be correctly applied when emulating an iPad3 (pixel ratio = 2), but not when emulating a Droid2 (pixel ratio = 1.5).

More complicated media queries, such as the ones you are using, are left unaltered by the emulator.  This means they get evaluated by the host system's web run time and whatever happens, happens.  Your query tested the device-width and device-height. Since the size of your host system monitor is pretty big it is not surprising that you got the "large screen" look, regardless of the selected emulation device.

You might have better luck using width and height instead of device-width and device-height.  If that still doesn't work and your application requires this media query to work properly for productive testing then I recommend you take Paul's advice (above) to heart and concentrate your testing efforts on real hardware.

    Julian

Some really useful information here, thanks for that.