解决移动端屏幕分辨率导致样式兼容问题

解决移动端屏幕分辨率导致样式兼容问题

$(function(){
		var u = navigator.userAgent;
		   var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		    if (isIOS) {        
		      if (screen.height == 568 && screen.width == 320){//iphone5大小
		        	var linkNode = document.createElement("link");
					linkNode.setAttribute("rel","stylesheet");
					linkNode.setAttribute("type","text/css");
					linkNode.setAttribute("href","css/css3.css");
					document.head.appendChild(linkNode); 
		        }
		    }
	});

方法一：

将不兼容的样式抽取至一个样式文件中，使用js页面初始化加载判断屏幕大小，并加载适应样式，之前引入的样式可以被覆盖。