高清屏解决方案

发表于 2019-04-04

Retina屏图片适配

如果屏幕的dpr（device pixel ratio）大于1，则屏幕是高清屏，每一个css像素所对应的物理像素不止一个，比如：

dpr：2，一个css像素对应4个物理像素
dpr：3，一个css像素对应9个物理像素

那么如果想针对不同dpr的屏幕提供不同的图片，可以使用如下方案：

Media query（只能用于背景图片）

12345678

.css{/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */     background-image: url(img_1x.png);}@media only screen and (-webkit-min-device-pixel-ratio:1.5){.css{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图 */ background-image: url(img_2x.png); }}

Javascript

1234567891011

$(document).ready(function(){ if (window.devicePixelRatio > 1) { var lowresImages = $('img');

 images.each(function(i) { var lowres = $(this).attr('src'); var highres = lowres.replace(".", "@2x."); $(this).attr('src', highres); }); }});

Retina屏下0.5px边框问题

因为2倍屏下，1px是由两个物理像素点组成的，所以较1倍屏1px线看起来会粗一点。通常解决办法是在2倍屏下使用0.5px作为边框宽度。比如对于iphone5(dpr=2)，添加如下的meta标签，设置viewport(scale 0.5)：

1	<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5,user-scalable=no">

然而，页面scale，必然会带来一些问题：

字体大小会被缩放
页面布局会被缩放(如: div的宽高等等

我们也可以使用css3，transform scale来进行元素的缩放，不影响其他元素，或者针对被缩小的元素再进行一次放大，比如

123	[data-dpr=2] div{ font-size: 32px;}

rem方案

某些情况下我们希望不同屏幕下的元素大小表现能够适应屏幕，比如一个大标题，在ip6 plus下大一点，ip5下就小一点，我们就可以利用rem的特性来解决。

1234567891011121314151617

var currClientWidth, fontValue, originWidth//originWidth用来设置设计稿原型的屏幕宽度（这里是以 Iphone 6为原型的设计稿）originWidth = 375__resize()

//注册 resize事件window.addEventListener('resize', __resize, false)

function __resize() { currClientWidth = document.documentElement.clientWidth //这里是设置屏幕的最大和最小值时候给一个默认值 if (currClientWidth > 640) currClientWidth = 640 if (currClientWidth < 320) currClientWidth = 320

 fontValue = ((16 * currClientWidth) / originWidth).toFixed(2) document.documentElement.style.fontSize = fontValue + 'px'}

这样，当我们使用rem作为单位时，不同宽度屏幕下元素的大小表现是不一样的。

转载于:https://www.cnblogs.com/guochongbin/p/10762695.html

Retina屏图片适配相关推荐

【iOS 开发】iOS 开发简介 (IOS项目文件 | MVC 模式 | 事件响应机制 | Storyboard 控制界面 | 代码控制界面 | Retina 屏幕图片适配)
一. iOS 项目简介 1. iOS 文件简介创建一个 HelloWorld 项目, 在这个 IOS 项目中有四个目录 : 如下图; -- HelloWorldTests 目录 : 单元测试相关的类 ...
Android 广告图片全屏图片适配方案的思路
场景: 在启动页加载一个全屏广告图片,要适配不同的机型. 问题: 如何适配不同的机型? 解决方法: 不要做满屏的图片,最好图片内容居中,周围留上纯色,就可以适配所有屏幕.可以参考淘宝.京东等.
移动端Retina屏幕图片适配
第一个方法 ;(function(win, lib) {var doc = win.document;var docEl = doc.documentElement;var metaEl = doc. ...
移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案
移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案说明:两个方案均基于Webpack构建. 方案一: 搭建环境及相关配置 webpack 3,需要loade ...
【iOS-Cocos2d游戏开发之八】开启高清（960*640）模式问题与解答、图片适配以及设置iphone横竖屏...
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2d/463.html ...
iOS 实现启动屏动画（Swift实现，包含图片适配）
代码地址如下: http://www.demodashi.com/demo/12090.html 准备工作首先我们需要确定作为宣传的图片的宽高比,这个一般是与 UI 确定的.一般启动屏展示会有上下两 ...
android引导页图片全屏适配,关于图片适配不同尺寸的image View（实战）
分享人:广州华软佐罗一. 前言在前端开发过程中,设计稿中往往只提供一张图片,但是app内需要用到的尺寸各种各样. 同时图片不仅是信息的直接表达,也会为网站起到美观点缀的作用,图片的变形.过分裁切会 ...
php手机图片怎么适配,详解如何使用image-set适配移动端高清屏图片
一.注意注意注意! 什么dpr.css像素.设备像素,这里是没有的,网上太多讲解了,都很好,这里不废话,建议是先查找相关资料了解再看本文章. 该图片适配方案是基于vw单位适配方案的,具体如何用vw进行 ...
Photoshop CS6 MAC 中文版破解版支持Retina屏
Photoshop CS6 MAC 中文版破解版支持Retina屏目前世界上"最好的化妆品"是一款叫做PhotoShop的产品,它可以帮你去除所有你不满意的地方.上周末,这款最 ...
屏幕适配入门-了解基本概念-图片适配
google 点击打开链接看不懂google的看这个启蒙篇点击打开链接鸿洋给出的建议:点击打开链接主要是通过设置百分比的方式达到适配的目的. 就是在项目中针对你所需要适配的手机屏幕的分辨率各 ...

Retina屏图片适配

高清屏解决方案

Retina屏图片适配

Media query（只能用于背景图片）

Javascript

Retina屏下0.5px边框问题

rem方案

Retina屏图片适配相关推荐

最新文章

热门文章