首页 > 代码库 > [HTML5]手机屏幕分辨率和浏览器分辨率
[HTML5]手机屏幕分辨率和浏览器分辨率
在使用CSS3的中有如下类似代码
Html代码
- @media screen and (max-width:480px){
- ……
- }
意思是在最大宽度为480px的设备上应用{}里面的样式。这里的width,注意是手机浏览器的分辨率,而不是手机设备的屏幕分辨率。比如苹果4的手机屏幕分辨率是960x640。而其自带的Safari浏览器的分辨率是320*480。我们可以通过如下代码检测所用的浏览器的分辨率:
Js代码
- $("#info").html("(您的浏览器的分辨率为:"+($(document).width()+"*"+$(document).height())+")");
Html代码
- <div id="info"></div>
在很多的Android设备上,系统自带的浏览器,chrome浏览器,QQ浏览器,UC等,经过测试得出的值都不太一样。这就给手机WEB开发带来了复杂度。同样在桌面浏览器中测试也会不同。
我们在针对手机进行WEB开发时,通常会在head中加入:
Html代码
- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
这里的device-width也是值所使用的浏览器的width,而非手机本身。
有不当还请指教。
======================分割线===========================
有用的JS检测代码:
Js代码
- /*
- * 智能机浏览器版本信息:
- *
- */
- var browser = {
- versions : function() {
- var u = 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.+Mac OS X)/), //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()
- }
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。