@viewport test #604

Closed
ryanseddon opened this Issue May 31, 2012 · 14 comments

8 participants

@ryanseddon
Modernizr member

Opera introduced the @-o-viewport rule http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

Is also in IE10. Someone wanna have a go at this?

@ryanseddon
Modernizr member

So I had a crack at this myself after seeing the monstrosity that MS did for the site redesign to "detect" @viewport support.

if (typeof window.indexedDB != 'undefined' && navigator.userAgent.indexOf('Trident/6.0') > -1)
    document.write('<style type="text/css">@-ms-viewport{width:100%;height:100%;}</style>');

http://jsfiddle.net/ryanseddon/4Yj9u/ <-- Returns the correct result in Opera mobile 12 which supports it, haven't tried in the latest IE10 PP. Would be great to have a less invasive test if someone knows a better way.

cc @miketaylr is there a better way to detect this that Opera may know internally?

@miketaylr

Works in Opera 12 desktop as well.

@scottjehl

Out of curiosity, what happens when @viewport is used without qualification?

@miketaylr

@scottjehl if by "without qualification" you mean w/ a prefix that a browser doesn't understand--nothing should happen. In Opera you get a "Unknown at rule" warning from the CSS parser.

But who knows, maybe that was found to crash old versions of IE....

@scottjehl

@miketaylr thanks. Yeah, I was just wondering why/if we can't include the rule in a stylesheet without a Modernizr-ish test is all, particularly seeing the effort MS underwent to conditionally include it.

Just wondering whether or not there is a particular situation/bug for which this test is needed currently. If not, cool, just curious!

@ryanseddon
Modernizr member

Firefox 17 is meant to have support for @supports this detect could be easily modified to do the same check as i've done so here http://jsfiddle.net/ryanseddon/4Yj9u/30/

It's on the agenda for Opera too.

Once I can verify the detect works I'll get both of these in.

There will be a js api exposed for this which will make the detect significantly easier https://bugzilla.mozilla.org/show_bug.cgi?id=779917

@sindresorhus
Modernizr member

Once I can verify the detect works I'll get both of these in.

ping

There will be a js api exposed for this which will make the detect significantly easier https://bugzilla.mozilla.org/show_bug.cgi?id=779917

Looks like this was fixed with milestone mozilla20. Firefox 20?

@myakura

Looks like this was fixed with milestone mozilla20. Firefox 20?

Maybe or maybe not. Support is behind the layout.css.supports-rule.enabled pref, and Mozilla currently sets it to false in release and beta builds, will turn it true by default once the spec stabilizes.

@patrickkettner
Modernizr member

@ryanseddon what benefit is it to know if the @viewport rule doesn't work after the page is loaded? What could one do with that information?

@ryanseddon
Modernizr member

@patrickkettner not sure really, makes it kind of a pointless test considering the nature of it.

@patrickkettner
Modernizr member

In that case, im closing it since you landed @supports forever ago.

If someone has a usecase, let us know, but I am drawing a big ol' blank

@patrickkettner
Modernizr member

That being said, this is how you would do it

  Modernizr.addTest('atviewport', function() {                                   

    return Modernizr.testStyles('', function(node, rule) {
      var style = document.getElementById('smodernizr');                         
      var sheet = style.sheet || style.styleSheet;  
      var supportsAtViewport                                                   

      for (var i = 0; i < Modernizr._prefixes.length; i++) {                                
        try {                                                                    
          var viewport = sheet.insertRule('@' + prefixes[i] + 'viewport{}', sheet.rules.length - 1);
          viewport = sheet.cssRules.item(viewport);                          
          supportsAtViewport = viewport.type == 15;                                
        } catch (e) {}                                                            
      }                                                                          

      return supportsAtViewport;                                   

    });                                                                          
  });  

Relies on the CSSRule type from WebIDL

@hexalys

Just for reference, there is an IE use-case to patch a meta-viewport flawed support in snap mode:
http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/

Also technically you'd only need to detect if any of the CSS Devices Adaption properties are exposed in document.documentElement.style:
max-zoom
min-zoom
orientation
user-zoom
The properties are referenced in webkit source under a ENABLE_CSS_DEVICE_ADAPTATION flag:
https://github.com/WebKit/webkit/blob/master/Source/WebCore/css/CSSPropertyNames.in

They are exposed in Presto, except that orientation is exposed yet not working, so not great:
http://www.opera.com/docs/specs/presto2.12/css/viewportdeviceadaptation/
Otherwise 'userZoom' in document.documentElement.style would be good enough.

The IE10-11prefixed implementation did not exposed the css properties.

@robsonsobral

@hexalys , hi!

I'm looking for how to test the @viewport support and found this topic.

Either max-zoom, min-zoom, orientation, user-zoom, maxZoom, minZoom, orientation or userZoom returns always true on Chrome 45.

The flags can make the unprefixed version to work.

I couldn't find a reliable way to test it, though.

Thank you for the info.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment