报错解决/简单媒体查询/动态加载css/横竖屏判断/html浏览器兼容性meta设置等小问题小知识

报错：Ambiguous mapping found. Cannot map 'Controller' bean method

解决办法：bean重复初始化，映射名重复，检查@RequestMapping()中的映射名改掉

报错：Expected one result (or null) to be returned by selectOne(), but found: 4

解决办法：查询返回多个值，要么返回值改为集合，要么查询返回单个值

简单媒体查询：

意思是没超过320px时是设置前的样式， 320-900px这一大块背景是红色 在这个范围内当600-720px时背景色变成了蓝色，900px以后又变成了设置前样式 

也就是说320-600px：红色；600-720px：蓝色；720-900px：红色；900px以后：设置前样式

@media screen and (min-width:320px) and (max-width:900px){
body{
background-color:red;
}
}
@media screen and (min-width:600px) and (max-width:720px){
body{
background-color:blue;
}
}

横屏/竖屏判断以及动作

@media all and (orientation : landscape) {
/*横屏时代码*/
}

@media all and (orientation : portrait){
body{
width:700px;
height:800px;
transform:rotate(90deg);
-ms-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
}

var mql = window.matchMedia('(orientation: portrait)');
console.log(mql);
function handleOrientationChange(mql) {
if(mql.matches) {
console.log('portrait');  // 竖屏
alert("数");
}else {
console.log('landscape'); // 横屏
alert("横");
}
} // 输出当前屏幕模式
handleOrientationChange(mql);
// 监听屏幕模式变化
mql.addListener(handleOrientationChange);

html静态布局浏览器兼容性meta设置

动态加载css以及js判断手机端且 动态加载css

动态加载css
function includeLinkStyle(url) {
 var link = document.createElement("link");
 link.rel = "stylesheet";
 link.type = "text/css";
 link.href = url;
 document.getElementsByTagName("head")[0].appendChild(link);
}
includeLinkStyle("http://css.jb51.net/home/css/reset.css?v=20101227");

function IsPC(url) {
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;//手机端
var link=document.createElement("link");
link.rel="stylesheet";
link.type="text/css";
link.href=url;
document.getElementsByTagName("head")[0].appendChild(link);
break;
}else{
//pc端
}
}
return flag;
}
IsPC("../css/phonelogin.css");
var flag = IsPC(); //true为PC端，false为手机端

知识点比较零碎，用于解决一些常见的问题，后续会深入研究解决并补充，谁让我们是最棒的呢！