在使用CSS3的中有如下类似代码
@media screen and (max-width:480px){ …… }
意思是在最大宽度为480px的设备上应用{}里面的样式。这里的width,注意是手机浏览器的分辨率,而不是手机设备的屏幕分辨率。比如苹果4的手机屏幕分辨率是960x640。而其自带的Safari浏览器的分辨率是320*480。我们可以通过如下代码检测所用的浏览器的分辨率:
$("#info").html("(您的浏览器的分辨率为:"+($(document).width()+"*"+$(document).height())+")");
<div id="info"></div>
在很多的Android设备上,系统自带的浏览器,chrome浏览器,QQ浏览器,UC等,经过测试得出的值都不太一样。这就给手机WEB开发带来了复杂度。同样在桌面浏览器中测试也会不同。
我们在针对手机进行WEB开发时,通常会在head中加入:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
这里的device-width也是值所使用的浏览器的width,而非手机本身。
有不当还请指教。
======================分割线===========================
有用的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() }
相关推荐
测试了系统自带ie、易浏览框、cef、360系列浏览器(外部进程的浏览器需自行写到dll里并注入到浏览器进程里)、精易模块的“系统_取屏幕分辨率”。支持ie内核、webkit内核或其他。资源作者:。@a3780586510。资源下载:...
网页里边的Js代码是可以读取到屏幕分辨率和浏览器可视大小的。通过对分辨率的检测,可以做为是否同一用户同一个浏览器在访问的依据。 浏览器自动更改屏幕分辨率和浏览器窗口大小,这样网页中的代码就检测到我们设置...
判断浏览器类型屏幕分辨率自动调用不同CSS的代码 打开后复制到HTML文件里运行.
该文档是所有的js获取屏幕分辨率的集合,注意:浏览器缩放会影响获取的参数。
用JavaiScript里的属性来获取浏览器的版本,屏幕的分辨率,操作系统。
总共hook了以下winapi函数GetDeviceCapsGetSystemMetricsSystemParametersInfoGetMonitorInfoEnumDisplaySettingsEnumDisplaySettingsEx调用模块:hook4e.ec测试了系统...取屏幕分辨率”支持ie内核、webkit内核或其他
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
jQuery文字大小自适应屏幕_调整浏览器屏幕文字大小自适应效果
JS判断浏览器分辨率自动调用不同CSS!
媒体查询(Media Query)是CSS3新语法。 ...- 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面 - 目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询
主要介绍了JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码,通过阻止浏览器的默认行为各方面分析缩放的功能实现,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
主要介绍了JS获取当前网页大小以及屏幕分辨率等,方法虽简单,但比较实用,需要的朋友可以参考下
“经系统检测,你的屏幕分辨率为 ” + wjb51+”*”+ hjb51 + “by 软件开发网jb51.net”); } // End –> [removed] js判断浏览器分辨率 代码如下:[removed]function ScreenWidth(){ if (s
PPCQQ2007_all.CAB:适用于Windows Mobile PocketPC 触屏手机屏幕分辨率240×320SPQQ2007QVGA_all.CAB:适用于Windows Mobile Smartphone QVGA系列 屏幕分辨率240×320SPQQ2007_all.CAB:适用于Windows ...
在使用Layui数据表格的时候,如果采用固定数值的话,在不同浏览器里显示会有差异,特别是在不同分辨率设备上。针对以此,把width设置直接去掉,貌似解决了我的显示问题。 之前固定宽高的情况 /*-------table-------...
前端开源库-w3counterW3Counter,获得十种最流行的屏幕分辨率、浏览器和操作系统
Toucher触摸屏浏览器软件界面美观大方,触摸查询导航方便,程序对外接口丰富,提供了在触摸屏一体机上... · 自动返回首页,定时关机,周末不开机,自动改变屏幕分辨率,禁止图像工具栏,禁止屏幕保护,延时启动软件。
网页缩放功能,根据您的屏幕分辨率将网页缩放成适当的比例,让您浏览网页更惬意。 关键字加亮功能,可以执行搜索结果关键字背景加亮效果,使您的搜索结果更醒目。 个性: 按钮栏图标主题 您可以选择kde,...