码迷,mamicode.com
首页 > 移动开发 > 详细

手机屏幕分辨率和浏览器分辨率

时间:2014-10-21 17:19:19      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:android   style   blog   http   color   io   os   ar   使用   

  意思是在最大宽度为480px的设备上应用{}里面的样式。这里的width,注意是手机浏览器的分辨率,而不是手机设备的屏幕分辨率。比如苹果4的手机屏幕分辨率是960x640。而其自带的Safari浏览器的分辨率是320*480。我们可以通过如下代码检测所用的浏览器的分辨率:

 

Js代码  bubuko.com,布布扣
  1. $("#info").html("(您的浏览器的分辨率为:"+($(document).width()+"*"+$(document).height())+")");  

 

Html代码  bubuko.com,布布扣
  1. <div id="info"></div>  

    在很多的Android设备上,系统自带的浏览器,chrome浏览器,QQ浏览器,UC等,经过测试得出的值都不太一样。这就给手机WEB开发带来了复杂度。同样在桌面浏览器中测试也会不同。

    我们在针对手机进行WEB开发时,通常会在head中加入:

Html代码  bubuko.com,布布扣
  1. <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()

}

 

手机屏幕分辨率和浏览器分辨率

标签:android   style   blog   http   color   io   os   ar   使用   

原文地址:http://www.cnblogs.com/libaoting/p/4040771.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!