• 【转】WEB APP 不同设备屏幕下图片适应分辨率


      约翰·格鲁伯:我认为 MobileSafari 不会再逐点对应的渲染图片,因为新旧 iPhone 之间的像素尺寸极为悬殊。
     
      戴夫·海厄特:大多数设计师仍停留在传统的思想:CSS 像素即屏幕像素。然而,当我们进入高 DPI 的世界,用户界面可能被整体放大,一个 CSS 像素会占据多个屏幕像素。
     
      IPHONE 3和 IPHONE 4是最典型的了,图片或ICON,在IPHONE 3能清晰显示的时候,IPHONE 4却会变的很模糊,无奈,只能准备两套图了。好在CSS提供的Media属性,能方便的让我们识别出不同DPI的设备,并以此来应用不同的样式。
     
      首先,看看,常见的IPHONE 和 Android屏幕参数。
     
    设备 分辨率 设备像素比率
    Android LDPI 320×240 0.75
    Iphone 3 & Android MDPI 320×480 1
    Android HDPI 480×800 1.5
    Iphone 4 960×640 2.0
     
      由此可见,Iphone 4的一个 CSS 像素实际上表现为一块 2×2 的像素。所以图片像是被放大2倍一样,模糊不清晰。
     
      解决办法:
     
      1、页面引用
    <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.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: 1.5)" href="hdpi.css" />
    <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 2.0)" href="retina.css" />

      2、CSS文件里

    #header {
        background:url(mdpi/bg.png);
    }
    
    @media screen and (-webkit-device-pixel-ratio: 1.5) {
        /*CSS for high-density screens*/
        #header {
            background:url(hdpi/bg.png);
        }
    }

      注:本文转自http://bbs.blueidea.com/home.php?mod=space&uid=168495&do=blog&id=23366

  • 相关阅读:
    keepalive高可用集群(nginx)
    nginx负载均衡
    linux-------lnmp安装
    nginx编译安装
    Django+MySQL安装配置详解(Linux)[更新为1.8.2版]
    linux性能监控——CPU、Memory、IO、Network
    linux 时钟时间,用户CPU时间,系统CPU时间 .
    指针用作传出参数时,需要二级指针
    僵尸进程&孤儿进程
    XHProf是一个分层PHP性能分析工具。
  • 原文地址:https://www.cnblogs.com/artwl/p/2740884.html
Copyright © 2020-2023  润新知