老闆讓寫一個客戶回報頁面，我用asp.net寫了一個頁面收集這些回報資訊，現在的問題是有的人是用PC機寫回報，有的是用手機寫回報，用PC機寫的無所謂，但是同一個頁面用手機的人感受十分不好，因為字什麼的太小了。
比如這個手機端的樣子：跟螢幕寬度一比，字小的令人發指。
我已經想到客戶在看到它時嘴形變化表達的意思了。
而就為了這麼個事難道我弄個APP?那我真是瘋了，是以我就想，我應該根據使用者端是PC還是手機來套上不同的樣式，是手機浏覽時，我讓這些控件大一點，這樣就可以了。
最終運作效果：
PC端：
手機端：使用者的界面看起來字型和控件大小都合适
實作代碼如下:
先将判斷用戶端是手機端還是PC端的JS寫在頁面的<head>中：
主要看下，pnorce函數中的sj1.css和pc1.css這兩個名字，因為後面要用到，其它照抄就行
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
//判斷用戶端種
function pnorpc() {
//true為PC端，false為手機端
var flag = IsPC();
if(!flag)
{
//如果是手機端，加載sj1.css樣式表
loadStyles("/Resourse/sj1.css");;
}
else
{
//如果是PC端，加載pc1.css樣式表
loadStyles("/Resourse/pc1.css");
}
}
//判斷用戶端是不是PC
function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
//動态加載不同的CSS檔案到〈head〉标簽中。
function loadStyles(url) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
</script>
</head> 在body一加載時，就開始判斷并根據情況加載不同的css檔案：
<body onload="pnorpc();"> PC1.css代碼，zoom就是放大倍數,PC端我寫的2
body {
zoom: 2;
-moz-transform: scale(1);
-moz-transform-origin: 0 0;
} sj1.css代碼,手機端時我寫的4
body {
zoom: 4;
-moz-transform: scale(1);
-moz-transform-origin: 0 0;
} 實際上就是根據不同用戶端放大不同倍數。
這樣客戶看起來就舒服多了，不用再放大了填寫，