移动端开发基本概念（视口、物理像素、设备像素比、多图、特殊样式、技术方案...）

视口布局视口、可视视口和理想视口布局在手机上显示早期的PC端页面。iOS和Android基本上将此视口分辨率设置为980px。所以PC端的网页大部分都可以在手机端呈现，只是元素和文字看起来很小。视觉视口：是用户正在看到的网站区域。您可以通过缩放操作视觉视口，但不会影响布局视口，布局视口仍会保持原来的宽度。理想视口：设置为使网站在移动端有最理想的浏览阅读宽度（即无需缩放或水平滚动即可查看网站所有内容），此视口适用于有专门适配了移动端。需要添加viewportmeta标签，让layoutviewport和idealviewport一样宽（width=device-width。即设备有多宽，layoutviewport的宽度）。viewportmetatagwidth：设置视口宽度（可以设置为device-width或像素值）【推荐为device-width】。user-scalable：用户是否可以缩放（是/否）[推荐为否]。initial-scale：初始比例因子[推荐为1.0]。maximum-scale：最大缩放比例[推荐为1.0]。minimum-scale：最小缩放比例[推荐为1.0]。物理像素、设备像素比、多倍图像物理像素是指屏幕上的像素，物理上真实存在，由厂商在出厂时设定。比如苹果6/7/8的物理像素是750*1334。Devicepixelratio在PC端页面，1px是1个物理像素，但在移动端不一定是1个物理像素。早期手机的屏幕和PC端一样，1px就是1个物理像素，但是Retina显示技术将更多的物理像素压缩到一块屏幕上，提高了手机的分辨率，让显示效果更加细腻（即1px等于2个物理像素比1px等于1个物理像素更清晰细腻）。一个px所能显示的物理像素的个数称为设备像素比（window.devicePixelRatio）。