本篇教程探讨了HTML5教程 如何获取手机屏幕分辨率和浏览器分辨率，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。
<
在使用CSS3的中有如下类似代码
Html代码
@mediascreenand(max-width:480px)｛
……
｝
意思是在最大宽度为480px的设备上应用{}里面的样式。这里的width，注意是手机浏览器的分辨率，而不是手机设备的屏幕分辨率。比如苹果4的手机屏幕分辨率是960x640。而其自带的Safari浏览器的分辨率是320*480。我们可以通过如下代码检测所用的浏览器的分辨率：
Js代码
$("#info").html("(您的浏览器的分辨率为："+($(document).width()+"*"+$(document).height())+")");
Html代码
在很多的Android设备上，系统自带的浏览器，chrome浏览器，QQ浏览器，UC等，经过测试得出的值都不太一样。这就给手机WEB开发带来了复杂度。同样在桌面浏览器中测试也会不同。
我们在针对手机进行WEB开发时，通常会在head中加入：
Html代码
这里的device-width也是值所使用的浏览器的width，而非手机本身。
有不当还请指教。
======================分割线===========================
有用的JS检测代码：
Js代码
/*
*智能机浏览器版本信息:
*
*/
varbrowser={
versions:function(){
varu=navigator.userAgent,app=navigator.appVersion;
return{//移动终端浏览器版本信息
trident:u.indexOf(‘Trident‘)>-1,//IE内核
presto:u.indexOf(‘Presto‘)>-1,//opera内核
webKit:u.indexOf(‘AppleWebKit‘)>-1,//苹果、谷歌内核
gecko:u.indexOf(‘Gecko‘)>-1&&u.indexOf(‘KHTML‘)==-1,//火狐内核
mobile:!!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/),//是否为移动终端
ios:!!u.match(/(i[^;]+;(U;)?CPU.+MacOSX)/),//ios终端
android:u.indexOf(‘Android‘)>-1||u.indexOf(‘Linux‘)>-1,//android终端或者uc浏览器
iPhone:u.indexOf(‘iPhone‘)>-1||u.indexOf(‘Mac‘)>-1,//是否为iPhone或者QQHD浏览器
iPad:u.indexOf(‘iPad‘)>-1,//是否iPad
webApp:u.indexOf(‘Safari‘)==-1
//是否web应该程序，没有头部与底部
};
}(),
language:(navigator.browserLanguage||navigator.language).toLowerCase()
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！
