移动开发

Posted 2020-12-14 tab15

 移动端浏览器主要针对webkit内核进行兼容

视口 viewport

浏览器显示页面内容的屏幕区域。可分为 布局视口、视觉视口、理想视口。

布局视口 layout viewport

ios、android将这个布局视口分辨率一般设置为980px

视觉视口 visual viewport

用户正在看到的网站区域 

理想视口 ideal viewport

为了使网站在移动端有最理想的浏览和阅读而设定的宽度，需手动设置meta视口标签，布局视口的宽度应该与理想视口的宽度一致，即手机屏幕有多宽，布局视口就设置多宽

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maxium-scale=1.0,minium-scale=1.0" />

 物理像素/物理像素比

物理像素:屏幕显示的最小颗粒，是物理真实存在的。厂商出厂时就设置好（即分辨率），例：iphone6是750*1334

PC端1px等于1物理像素，但移动端并不一定。

一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比。

Retina视网膜屏幕是一种显示技术，可以将更多的物理像素点压缩到一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

 二倍图

例：一个css像素为 50px*50px的图片，放到iphone8中显示(物理像素比为2.0),那么图片会被放大为 100*100物理像素显示，那么图片会出现失真情况。

解决：准备一个css像素为100px*100px的图片，通过设置图片大小50px*50px，放到iphone8被放大2倍即100*100物理像素，仍然能保持不失真。