• 利用HTML5开发Android(1)---Android设备多分辨率的问题


    Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示

    Android浏览器和WebView默认为mdpi。hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍

    三种解决方式:1 viewport属性 2 CSS控制 3 JS控制

    1 viewport属性放在HTML的<meta>中

    Html代码 
    <SPAN style="FONT-SIZE: x-small">   
    <head>    
            <title>Exmaple</title>    
            <meta name=”viewport” content=”width=device-width,user-scalable=no”/>    
    </head>
    </SPAN>  

    meta中viewport的属性如下

    Html代码  
    <SPAN style="FONT-SIZE: x-small">   
    <meta name="viewport"  
            content="   
                height = [pixel_value | device-height] ,   
                width = [pixel_value | device-width ] ,   
                initial-scale = float_value ,   
                minimum-scale = float_value ,   
                maximum-scale = float_value ,   
                user-scalable = [yes | no] ,   
                target-densitydpi = [dpi_value | device-dpi |   
                high-dpi | medium-dpi | low-dpi]   
            "   
        />
    </SPAN>  
    

    2 CSS控制设备密度

    为每种密度创建独立的样式表(注意其中的webkit-device-pixel-ratio 3个数值对应3种分辨率)

    Html代码  
    <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />  
    <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />  
    <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />  

    在一个样式表中,指定不同的样式

    Html代码  
    #header {    
     <SPAN style="WHITE-SPACE: pre"></SPAN>
     background:url(medium-density-image.png);    
    }   
    @media screen and (-webkit-device-pixel-ratio: 1.5) {    
        // CSS for high-density screens    
        #header {    
            background:url(high-density-image.png);    
        }    
    }    
    @media screen and (-webkit-device-pixel-ratio: 0.75) {    
        // CSS for low-density screens    
        #header {    
            background:url(low-density-image.png);    
        }    
    }  
    

    Html代码  

    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />  
    

      3 JS控制

    Android浏览器和WebView支持查询当前设别密度的DOM特性

    window.devicePixelRatio 同样值有3个(0.75,1,1.5对应3种分辨率)

    JS中查询设备密度的方法

    Js代码 

    if (window.devicePixelRatio == 1.5) {   
        alert("This is a high-density screen");   
    } else if (window.devicePixelRation == 0.75) {   
        alert("This is a low-density screen");   
    }  
  • 相关阅读:
    Jenkins忘记用户名密码怎么登陆,Tomcat启动Jenkins服务
    robotframework-ride导入已安装的库报红解决
    robotframework-ride打开提示wxPython不存在,实际已安装
    .NET开发Windows服务
    Hadoop:操作 Hadoop Cluster
    Hadoop: Hadoop Cluster配置文件
    Hadoop:部署Hadoop Single Node
    CentOS7安装ftp服务器
    理解timestamp
    python生成器实现杨辉三角
  • 原文地址:https://www.cnblogs.com/lvfeilong/p/34543fgdfgfg.html
Copyright © 2020-2023  润新知