【转】WEB APP 不同设备屏幕下图片适应分辨率-低调大师

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

2017-11-23 641

　　约翰·格鲁伯：我认为 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

本文转自Artwl博客园博客，原文链接：http://www.cnblogs.com/artwl/，如需转载请自行联系原作者

微信关注我们

原文链接：https://yq.aliyun.com/articles/399734

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

android 中resources管理

主要存在于res/value文件夹中定义： dimen.xml：主要用于设置像素默认值 <resources> res/values/dimens.xml <dimen name="sp_12">12sp</dimen> <dimen name="sp_13">13sp</dimen> <dimen name="dip_40">40dip</dimen> <dimen name="dip_45">45dip</dimen> </resources> 代码使用： int width=getContext().getResources().getDimension(R.dimen.tab_width); xml文件使用： android:layout_width="@dimen/tab_width" color.xml设置颜色 <?xml version="1.0" encoding="utf-8"?> <resources> <item ...

2017-11-24

481

　本文主要转自：移动浏览器的viewport，部分内容有补充修改。对于移动web开发，最好了解一下viewport的概念，在quirksmode.org有两篇文章详细介绍了它，A tale of two viewport(12)，感觉非常好，本来想翻译的，但这两篇文章实在太长了，没耐性，于是抽取了其中重点讲viewport的部分，用半翻译半自己写的方式写出来，这也是为了让自己能够理解得更好一些。其中CSS像素和设备像素的概念，还有js获取各种宽高和位置的内容都没有提及，要想了解得更清楚还是推荐看看那两篇文章。以下图片均来自quirksmode.org。桌面浏览器先说说桌面浏览器上viewport的概念，在桌面浏览器上viewport就是浏览器内容的可视范围，它决定了<html>元素的默认宽高。举个例子：在一个流动布局的页面上，你给侧栏设置了width:30%，放在<body>下，正常情况下你拖动浏览器，改变浏览器的大小，这个侧栏会自动调整宽度使它的宽度为浏览器宽度的30%，那么这个自动调整的过程具体是怎样的呢？这个侧栏会获取父元素的宽度，乘以30%得...

2017-11-24

518

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。