metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Learn about the browsers and devices, from modern to told, that are supported by Metro, including known quirks and bugs for each."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Browsers and devices - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Browsers and devices</a></li> <li class="toc-entry"> <a href="#_supported_browsers">Supported browsers</a> <ul class="toc-nav"> <li class="toc-entry"><a href="#_mobile_devices">Mobile devices</a></li> <li class="toc-entry"><a href="#_desktop_browsers">Desktop browsers</a></li> </ul> </li> <li class="toc-entry"><a href="#_internet_explorer">Internet explorer</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Browser and devices</h1> <p class="text-leader"> Learn about the browsers and devices, from modern to told, that are supported by Metro, including known quirks and bugs for each. </p>  <h3 id="_supported_browsers">Supported browsers</h3> <p> Metro supports the <strong>latest, stable releases</strong> of all major browsers and platforms. On Windows, we support <strong>Internet Explorer 11 and Microsoft Edge</strong>, IE10 supports partially. </p> <p> Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform’s web view API, are not explicitly supported. However, Metro should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below. </p> <h4 id="_mobile_devices">Mobile devices</h4> <p> Generally speaking, Metro supports the latest versions of each major platform’s default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk) are not supported. </p> <table class="table striped border bordered"> <thead> <tr> <th></th> <th>Chrome</th> <th>Firefox</th> <th>Safari</th> <th>WebView</th> <th>Microsoft Edge</th> </tr> </thead> <tbody> <tr> <td class="text-bold">Android</td> <td class="fg-green text-center"><span class="mif-checkmark mif-2x"></span></td> <td class="fg-green text-center"><span class="mif-checkmark mif-2x"></span></td> <td class="fg-red text-center"><span class="mif-minus mif-2x"></span></td> <td class="fg-orange text-center"><span class="mif-checkmark mif-2x"></span></td> <td class="fg-red text-center"><span class="mif-minus mif-2x"></span></td> </tr> <tr> <td class="text-bold">IOS</td> <td class="fg-green text-center"><span class="mif-checkmark mif-2x"></span></td> <td class="fg-green text-center"><span class="mif-checkmark mif-2x"></span></td> <td class="fg-green text-center"><span class="mif-checkmark mif-2x"></span></td> <td class="fg-red text-center"><span class="mif-minus mif-2x"></span></td> <td class="fg-red text-center"><span class="mif-minus mif-2x"></span></td> </tr> <tr> <td class="text-bold">Windows 10 Mobile</td> <td class="fg-red text-center"><span class="mif-minus mif-2x"></span></td> <td class="fg-red text-center"><span class="mif-minus mif-2x"></span></td> <td class="fg-red text-center"><span class="mif-minus mif-2x"></span></td> <td class="fg-red text-center"><span class="mif-minus mif-2x"></span></td> <td class="fg-green text-center"><span class="mif-checkmark mif-2x"></span></td> </tr> </tbody> </table> <p class="text-small fg-gray"> WebView on Android supported from v5.0+ </p> <h4 id="_desktop_browsers">Desktop browsers</h4> <p> Similarly, the latest versions of most desktop browsers are supported. </p> <table class="table striped border bordered"> <thead> <tr> <th></th> <th>Chrome</th> <th>Firefox</th> <th>IE</th> <th>Edge</th> <th>Opera</th> <th>Safari</th> </tr> </thead> <tbody> <tr> <td class="text-bold">Mac</td> <td class="fg-green text-center"><span class="mif-checkmark mif-2x"></span></td> <td class="fg-green text-center"><span class="mif-checkmark mif-2x"></span></td> <td class="fg-red text-center"><span class="mif-minus mif-2x"></span></td> <td class="fg-red text-center"><span class="mif-minus mif-2x"></span></td> <td class="fg-green text-center"><span class="mif-checkmark mif-2x"></span></td> <td class="fg-green text-center"><span class="mif-checkmark mif-2x"></span></td> </tr> <tr> <td class="text-bold">Windows</td> <td class="fg-green text-center"><span class="mif-checkmark mif-2x"></span></td> <td class="fg-green text-center"><span class="mif-checkmark mif-2x"></span></td> <td class="fg-orange text-center"><span class="mif-checkmark mif-2x"></span></td> <td class="fg-green text-center"><span class="mif-checkmark mif-2x"></span></td> <td class="fg-green text-center"><span class="mif-checkmark mif-2x"></span></td> <td class="fg-red text-center"><span class="mif-minus mif-2x"></span></td> </tr> </tbody> </table> <p class="text-small fg-gray"> Internet explorer on Windows supported from 11+ </p> <p> For Firefox, in addition to the latest normal stable release, we also support the latest Extended Support Release (ESR) version of Firefox. </p> <p> Unofficially, Metro should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 9, though they are not officially supported. </p>  <h3 id="_internet_explorer">Internet Explorer</h3> <p> Internet Explorer 11+ is supported, IE10 - partially, IE9 and down is not. Please be aware that some CSS3 properties and HTML5 elements are not fully supported in IE10. Visit <a href="http://caniuse.com/">Can I use…</a> for details on browser support of CSS3 and HTML5 features. </p> <p> If in your IE widgets are not initialized, you must include <a href="https://github.com/w3c/IntersectionObserver/tree/gh-pages/polyfill">Observer polyfill</a>. </p> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>