zoukankan      html  css  js  c++  java
  • 手机屏幕分辨率和浏览器分辨率

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

    Js代码  收藏代码
    1. $("#info").html("(您的浏览器的分辨率为:"+($(document).width()+"*"+$(document).height())+")");  
    Html代码  收藏代码
    1. <div id="info"></div>  

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

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

    Html代码  收藏代码
    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()
    
    }
  • 相关阅读:
    使用Xcode 制作自定义storyboard启动界面,供uniAPP使用。
    由于ios由UIWebView换成了WKWebview内核后导致webview请求接口文件上传,后台接收不到文件
    标准基座获取定位可以获取address城市,自定义基座获取不到address
    WeeklyEnglish 2020
    Maven编译打包时报“PKIX path building failed”异常解决方法
    Spring Security
    在IDEA中导入GIT项目
    利用git上传本地文件、文件夹到Github
    OpenAM
    CentOS 安装 OpenAM
  • 原文地址:https://www.cnblogs.com/libaoting/p/4040771.html
Copyright © 2011-2022 走看看