H5移动端适配 Flexible方案
针对移动端H5的适配方案Flexible，以下是详细的介绍：
一、移动端开发基本概念
在移动端网页开发前，视觉设计师会为我们提供视觉稿，选取一款手机的屏幕宽高作为基准，通常以iPhone的某款机型为标准。视觉稿的规范是为了确保页面在多种设备上都能呈现高清效果。
那么，对于拥有retina屏幕的手机（如iPhone），为什么画布大小需要加倍呢？这是因为retina屏幕的设备像素比（device pixel ratio，简称dpr）通常为2，意味着物理像素是标准屏幕的2倍。为了在这些设备上呈现高清效果，视觉稿的画布大小也要相应增大，从而使得位图像素点个数是原来的4倍。这样，在retina屏幕上显示的图片和界面会更加清晰。
二、关于视觉稿中的标注稿、物理像素、设备独立像素和设备像素比等概念的理解
标注稿是视觉设计师为我们提供的页面元素标注，帮助我们理解页面布局和元素间的位置关系。物理像素是显示器上的最小显示单元，而设备独立像素则是一个计算机坐标系统中的点，代表了可以由程序使用的虚拟像素。设备像素比（device pixel ratio）定义了物理像素和设备独立像素的对应关系。在JavaScript中，我们可以通过window.devicePixelRatio获取到当前设备的dpr。
三、移动端尺寸适配的核心问题：图片高清展示
在普通屏幕下，一个css像素对应一个物理像素。但在retina屏幕下，一个css像素可能对应四个物理像素。对于图片的展示，如果位图像素不够，就会出现模糊的情况。为了解决这个问题，通常采用两倍图片（@2x）的方案。也就是说，如果一个元素在css中是200×300像素，那么就需要提供×600像素的图片。这样，在retina屏幕下，位图像素点个数就能与物理像素点个数形成1:1的比例，图片就能清晰展示。
对于H5移动端的适配方案Flexible，我们需要深入理解移动端的各种概念和特点，包括视觉稿、物理像素、设备独立像素、设备像素比以及位图像素等。我们也要掌握如何通过适当的图片尺寸和css编码来实现页面的高清展示，确保在不同设备和屏幕上都能获得良好的用户体验。深入屏幕下的图像清晰度：从CSS像素到Retina显示
在普通的屏幕环境下，一个200×300的img标签，其物理像素确实是200×300个。但当我们在Retina等高分辨率屏幕上查看时，情况就有所不同了。为了在这些屏幕上呈现更加细腻的图像，位图像素的数量需要增加。例如，在Retina屏幕上，一个物理像素点可能对应4个位图像素点。这一过程被称为下采样，它需要一种特殊的算法来处理图像的像素数据，从而使图像在视觉上保持清晰。尽管肉眼可能察觉不到模糊，但图像的某些锐利度和色彩可能会略有损失，但通常这种差异是可以接受的。
面对这样的问题，最好的解决方案是什么呢？答案是：在不同的设备像素比（DPR）下，加载不同尺寸的图片。无论是通过CSS媒体查询还是JavaScript条件判断，都可以实现这一目标。这听起来似乎需要准备两套图片（@1x和@2x）。对于处理得好的公司，他们会有一个图片服务器，可以通过URL获取参数来控制图片的质量和尺寸。我们只需上传高分辨率的图片（@2x），而其余的图像处理工作都交给图片服务器。我们只需负责拼接URL即可。
再谈谈设计师在Retina下想要的border: 1px。在物理屏幕上，这确实意味着1个物理像素宽。但在CSS中，我们可以将其视为border: 0.5px，这是Retina屏幕（DPR=2）能显示的最小单位。并非所有的手机浏览器都能识别0.5px的边框。例如，iOS 7及以下版本以及Android等其他系统会将0.5px当作0px处理。那么如何实现这0.5px的边框呢？
方案一：一种简单的方法是使用元素缩放（element scale）。具体来说，我们可以创建一个伪元素来模拟这个边框，并通过transform属性将其在Y轴上缩小0.5倍来达到所需的效果。这种方法对于其他形状如圆角等并不通用。
方案二：另一种更加通用的方法是页面缩放（page scale）。这种方法几乎可以满足所有场景的需求。不论选择哪种方案，核心目标都是为了在Retina等高分辨率屏幕上呈现更加清晰、细腻的图像效果。随着技术的发展和进步，我们期待在未来能看到更加完善的解决方案，为各种屏幕提供最佳的图像体验。针对iPhone5的Retina屏幕（dpr=2）进行适配的meta标签设置详解及布局适配技巧
在iPhone5等Retina屏幕上，为了获得更好的显示效果，我们经常需要设置特定的viewport标签来达到理想的页面展示效果。本文将详细讲解如何在iPhone5上设置meta标签以实现viewport的scale为0.5的效果，并讨论相关的布局适配问题。
一、添加meta标签并设置viewport scale为0.5的问题
当我们为iPhone5设置viewport的scale为0.5时，可能会遇到以下问题：
1. 字体大小会被缩放。在Retina屏幕上，为了让内容清晰可见，系统会尝试将所有内容缩小一半。如果你的网页字体原本设计为适合非Retina屏幕的大小，那么在Retina屏幕上它们会显得太小。
2. 页面布局会被缩放。如div等元素的高度和宽度也会被缩小。这意味着在没有考虑适配Retina屏幕的情况下设计的页面布局可能会产生错乱现象。为了解决这个问题，我们需要采取一些策略来适配Retina屏幕。
二、多屏适配布局问题解决方案——Flexible方案
你需要下载并加载Flexible相关的库文件。你可以通过下载bower下载lib-flexible，然后将flexible_css.js和flexible.js文件加载到你的项目中。加载方式如下：
`` 和 `` 或者直接加载阿里CDN的文件 `