报错解决/简单媒体查询/动态加载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

动态加载cssfunction 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为手机端

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