利用Javascript判斷操作系統的類型實現不同操作系統下的兼容性
2024-05-06 14:19:47
供稿：網友
在通過Javascript實現客戶端和服務端的交互時，有時候需要對操作系統進行判斷，以便實現不同操作系統下的兼容性，比如：我們有一個網站， 在Windows XP下瀏覽效果良好，但是到了Ubuntu下，由于許多特性不同，會造成在瀏覽上的細微差異，甚至會影響到良好的用戶體驗。這個時候我們就需要利用 Javascript對操作系統的類型以及某些特性進行判斷，分而治之，從而實現網站在跨平臺瀏覽時候保持良好的用戶體驗。
下邊的代碼實現對Windows、Mac、Linux、Unix擦作系統的判斷：
代碼如下:
<script type="text/javascript" language="JavaScript">
<!--
function check_os() {
windows = (navigator.userAgent.indexOf("Windows",0) != -1)?1:0;
mac = (navigator.userAgent.indexOf("mac",0) != -1)?1:0;
linux = (navigator.userAgent.indexOf("Linux",0) != -1)?1:0;
unix = (navigator.userAgent.indexOf("X11",0) != -1)?1:0;
if (windows) os_type = "MS Windows";
else if (mac) os_type = "Apple mac";
else if (linux) os_type = "Lunix";
else if (unix) os_type = "Unix";
return os_type;
}
//-->
</script>
如果我們需要對Windows操作系統進行更為精確的識別，可以繼續使用下邊的代碼操作：
代碼如下:
<script type="text/javascript" language="JavaScript">
<!--
var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows"); // 確保為windows系統
var isWin98 = isWin2000 = isWinXP = false;
var sUserAgent = navigator.userAgent;
if(isWin) {
isWin98=sUserAgent.indexOf("Win98") > -1 || sUserAgent.indexOf("Windows 98") > -1; // win98
isWin2000=sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1; //win2000
isWinXP=sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows Xp") > -1; //winxp
isWin98 && alert("window 98");
isWin2000 && alert("windows 2000");
isWinXP && alert("windows XP");
}
//-->
</script>
下邊的代碼是為了實現對瀏覽器是否支持XML特性的檢測：
代碼如下:
<script type="text/javascript" language="JavaScript">
var SupportXml=false;
var xmldom;
if(window.ActiveXObject) {
try {
xmldom=new ActiveXObject("Microsoft.XMLDOM");
SupportXml=(xmldom.loadXML(" <ok/>"));
} catch(e) {}
}
else if(document.implementation && document.implementation.createDocument) {
SupportXml=true;
}
alert('XML狀態為：'+SupportXml);
</script>
PS：為了更好地避免不同瀏覽器，不同操作系統因為默認文字不同而對頁面布局造成影響，應盡量避免CSS中使用固定行高(height:12px;)對 文字高度進行限定，應該盡量使用height:auto，如果迫不得已必須限定文字高度（比如只顯示一行），則應使用em代替px（例如 height:1.1em;），1em=1文字高度，這樣就使得文字高度隨著文字大小動態改變，不會造成文字截斷現象的發生了。
