Fix compatibility with a variety of non-WebGL browsers.

CesiumGS · Dec 19, 2013 · 98ed537 · 98ed537
1 parent 522afb2
commit 98ed537
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -21,10 +21,12 @@
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 -->
-<html>
+<html lang="en">
 <head>
 	<title>WebGL Report</title>
-	<meta http-equiv="X-UA-Compatible" content="chrome=1">
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" type="text/css" href="black.css">
 	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
@@ -226,13 +228,31 @@ <h1>Textures</h1>
 		</p>
 	</script>
 
+	<script type="text/template" id="webglNotEnabledTemplate">
+		<p>This browser supports WebGL, but it is disabled or unavailable.</p>
+		<p>Sometimes this is the result of older video drivers being rejected by the browser.  Try updating your video drivers if possible.</p>
+		<p>
+			Also check out <a href="http://get.webgl.org/">Get WebGL</a>,
+			or try installing the latest version of
+			<a href="http://www.google.com/chrome">Chrome</a>, or
+				<a href="http://www.mozilla.org/en-US/firefox/">Firefox</a>.
+		</p>
+	</script>
+
 	<a href="https://github.com/AnalyticalGraphicsInc/webglreport" target="_blank"><img style="position: absolute; top: 0; left: 0; border: 0;" src="images/ForkMe_Ribbons/ForkMe_Blk.png" alt="Fork me on GitHub"></a>
 
 	<h1>WebGL Report</h1>
 
+	<p id="javascript_disabled" class="align-center">You need to enable JavaScript to see WebGL.</p>
+
 	<div class="align-center" id="output">
 	</div>
 
+	<script type="text/javascript">
+		var _noJS = document.getElementById('javascript_disabled');
+		_noJS.parentNode.removeChild(_noJS);
+	</script>
+
 	<!-- Google Analytics -->
 	<script type="text/javascript">
 		var _gaq = _gaq || [];

diff --git a/webglreport.js b/webglreport.js
@@ -27,6 +27,12 @@ THE SOFTWARE.
 $(function() {
     "use strict";
 
+    var template = _.template($('#reportTemplate').html());
+    var report = {
+        platform: navigator.platform,
+        userAgent: navigator.userAgent
+    };
+
     if (!window.WebGLRenderingContext) {
         // The browser does not support WebGL
         renderReport($('#webglNotSupportedTemplate').html());
@@ -43,16 +49,10 @@ $(function() {
 
     if (!gl) {
         // The browser supports WebGL, but initialization failed
-        renderReport($('#webglNotSupportedTemplate').html());
+        renderReport($('#webglNotEnabledTemplate').html());
         return;
     }
 
-    var template = _.template($('#reportTemplate').html());
-    var report = {
-        platform: navigator.platform,
-        userAgent: navigator.userAgent
-    };
-
     function getExtensionUrl(extension) {
         //special cases
         if (extension === 'WEBKIT_lose_context') {