移动端web高清屏显示及伸缩布局方案(原创)

JavaScriptDoc
JavaScriptDoc

前言

该解决方案包含的技术有：传统的rem移动端布局；动态修改meta标签实现不同dpr设备的页面缩放；flex弹性布局；媒体查询加载相应倍图；Img的srcset；background的image-set；svg图标系统；

这个方案我是在网上看了关于 viewport 缩放页面后，结合当前使用的rem布局方案而来。
你有没有在移动H5开发的时候遇到过这样的情况，页面不清晰，明明1px的线条看上去却很宽，而且有些模糊，图片看上去好像失真了一样？和大厂的m站一比，光看自己页面的细节就土的掉渣。遇到过，那就说明你用的移动设备的屏幕是高清屏，也就是dpr大于1的屏幕。而这一切都是拜 乔帮主(你知道是哪位) 所赐。我这里只是简单的介绍，本来也想详细的说说，但感觉自己的语言组织不是太给力，所以还是推荐大家直接看参考文章，这些文章都很值得大家好好看的，里面图文并茂，该有的不该有的都有。

传统的一种移动端布局方案

w: 当前页面宽度
x: 当前字体大小

换算关系:
w / 640 = x / 100

所有的px尺寸都除以100，就得到rem的尺寸

解决什么问题

border: 1px问题;
图片高清问题;
屏幕适配布局问题;

用到的知识点

设备像素比dpr

dpr = 物理像素 / 设备独立像素;

参考文章：
设备像素比devicePixelRatio简单介绍
原创移动端高清、多屏适配方案

viewport

flex布局

关于flex布局可以看下我的这篇文章：flex布局解析

解决思路

flex解决布局适配问题

参见 flexible项目 的flexible.css

动态修改meta标签实现页面的缩放

参见 flexible项目 的flexible.js

高清图片

SVG 图标系统

可以解决小icon的高清适配问题，因为SVG是矢量图，缩放不会失真;
建议通过 iconfont 制作
这里有一个在线的 svg压缩工具

1
2
3
4
5
6
7
8
9
10
11
12
/* 定义 */
<svg style="display: none">
	<symbol id="icon" viewBox="0 0 200 200">
		<title>opt</title>
		<path d="" />
	</symbol>
</svg>

/* 使用 */
<svg>
	<use xlink:href="#icon"></use>
</svg>

iconfont

可以解决 icon 的高清适配问题，建议通过 iconfont 制作

MediaQuery

MediaQuery 可以解决背景图片的高清适配;

1
2
3
4
5
6
@media only screen
and (-webkit-device-pixel-ratio:2)
and (-webkit-min-device-pixel-ratio:1.5)
and (-webkit-max-device-pixel-ratio:2.5){
	background: url(icon_2@.png) no-repeat;
}

CSS的image-set属性

image-set属性可以解决背景图片的高清适配;
目前移动端可以使用带 -webkit- 前缀的属性，Android4.4及以上系统，IOS9.0及以上系统;
可在 caniuse 查看该属性目前的支持情况;

1
2
3
4
5
6
7
8
9
div{
	/* 不支持image-set的浏览器 */
	background: url(icon_1@.png) no-repeat;
	/* 支持image-set的浏览器 */
	background: -webkit-image-set(
		url(icon_1@.png) 1x, /* 普通屏 */
		url(icon_2@.png) 2x /* 高清屏 */
	);
}

图片延迟加载

移动端的图片延迟加载在我看来很必要的，而且顺带可以解决图片的高清适配;
通过 window.devicePixelRatio 可以获取到当前设备的dpr，然后加载相应的图片。

img的srcset和sizes属性


解决图片的高清适配，具体还是看张鑫旭张老师的这篇文章

转载请注明出处：移动端web高清屏显示及伸缩布局方案