2018年4月10日 星期二

[研究][ASP.NET][JavaScript] modernizr v2.8.3 試用 (偵測瀏覽器是否支援HTML5與CSS3等規格)

[研究][ASP.NET][JavaScript] modernizr v2.8.3 試用 (偵測瀏覽器是否支援HTML5與CSS3等規格)

2017-12-13

官方網站
https://modernizr.com/

Modernizr Documentation
https://modernizr.com/docs

Modernizr - 維基百科，自由的百科全書
https://zh.wikipedia.org/wiki/Modernizr
Modernizr是一套JavaScript 函式庫，用來偵測瀏覽器是否支援HTML5與CSS3等規格。如果瀏覽器不支援，Modernizr會使用其他的解決方法來進行模擬。

這裡有範例。(這個範例除了用到 modernizr，還需要 jQuery)
注意，這個範例在 Modernizr 3.x 版測試失敗，請用 Modernizr 2.8.3 版。

CDNJS
https://cdnjs.com/
輸入 modernizr，有下面可用
https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js
https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

環境：
Visual Studio 2017 v15.6.5 + WebForm















範例參考這裡


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script src="Scripts/modernizr-2.8.3.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        if(Modernizr.websockets) {
          $("#result").html('你的瀏覽器支援Web Sockets');
        } else {
          $("#result").html('你的瀏覽器不支援Web Sockets');
        }
      });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
    </form>
    <p id="result"></p>
</body>
</html>


jQuery 和 modernizr 並沒有相依關係，所以兩者誰放前面都可以。


********************************************************************************

關於 Modernizr 3.x 測試




錯誤訊息

未處理的例外狀況 位於行 2，欄 31040 在 http://localhost:13307/Scripts/jquery-3.3.1.min.js 中
0x800a1391 - JavaScript 執行階段錯誤: 'Modernizr' 未經定義 發生 

尚未找到解法。

用 Modernizr is not defined 也尚未找到解法。

(完)
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)