老板让写一个客户反馈页面，我用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;
}
实际上就是根据不同客户端放大不同倍数。
这样客户看起来就舒服多了，不用再放大了填写，