使用百分比自适应布局（流式布局）同时 设置 viewport（视口）即可达到适配目的

流式布局：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局

视觉窗口：viewport，是移动端特有的，这是一个虚拟的区域，承载网页的，他们的关系：浏览器承载viewport，viewport再去承载网页

 适配方案（主流适配方案）：

  1.网页内容的宽度必须和浏览器保持一致

  2.默认显示的缩放比例和PC端保持一致（缩放比例 1.0）

  3.不允许用户自行缩放网页

满足以上要求，就达到了适配，称之为国际通用适配方案

 适配设置：

 如果任何设置都没有，默认走的就是viewport的默认设置

 去设置新的viewport设置，达到适配的要求

<meta name="viewport"> 设置视口的标签，写在head里边并且应该紧接着编码设置

viewport的功能：

  1.可以设置宽度 width    （device-width  当前设备的宽度）

  2.可以设置高度 height

  3.可以设置默认的缩放比例  initial-scale

  4.可以设置是否允许用户自行缩放 user-scalable 

  5.可以设置最大、最小缩放比例 maximum-scale   minimum-scale

在<meta name="viewport" content="">  content=""使用以上参数

1.width=device-width 宽度一致 比例是1.0

2.initial-scale=1.0  宽度一致，比例是1.0     

3.user-scalable=no 不允许用户自行缩放  yes  no   1   0

 适配方案（非主流方案）

  1.页面真实尺寸会比设备的尺寸大上几倍

  2.假设设备是iphone4   320px  网页尺寸 640px

  3.缩放操作有 2倍  3倍  和屏幕像素比有关系

  4.什么是 像素（物理像素点）  px（页面的尺寸单位）

  5.物理像素 是设备显示屏的最小可视颗粒的大小  

  6.现在有高清显示屏（视网膜屏幕、retina屏幕）

  7.显示效果就会更加细腻，但是显示同等质量的图片的时候，就会产生模糊效果

  8.在屏幕像素比（一个PX可以放几个物理像素）高的设备图片（非矢量图）显示会模糊

  9.提高网页的清晰度  根据屏幕的像素比来缩放网页

 10.这样的适配方案成本非常的高

 11.在一般的企业开发当中，使用的还是标准化设置

   在高清显示屏当中，图片可能会失真（模糊）

作者：靖凡无所畏惧

链接：https://blog.csdn.net/wjf1997/article/details/104467415

来源：CSDN
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。